Why using span tag give me result that is not to be expected?-CodePudding

i wanted to get the result like this. result1 my code is

<!DOCTYPE html>
<html>
<head>
<style>
span{ background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);}
</head>
<body>
<pre>
<code>
<span>// Prints 5 to the console</br>
                console.log(5);
</span>
</code>
</pre>
</body>
</html>

but i got; result2

CodePudding user response：

I took some time to play around with your code. Your Style tag in HTML should be all together, or housed if that makes sense. I am still learning as I go along haha here you go, I but your Style attribute is now all together at the top.

Let me know if that works.

<style>
    p {
        background-color: rgb(33, 30, 47);
        color: rgb(147, 149, 152);
    }
</style>

CodePudding user response：

Firstly your style tag isn't closed properly. I have written the code to exactly simulate the styling you need. You have to embed all your elements into a div container, adjust the width and then apply box properties.

<html>
<head>
    <style>
        div {
            background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);
            width: 200px;
            padding: 25px;
        }
        .red{
            color:red
        }
        .blue{
            color:skyblue
        }
        .white{
            color:white
        }
    </style>
</head>

<body>
    <div>
<pre>
// Prints 5 to the console
<span >console</span><span >.</span><span >log</span><span >(</span><span >5</span><span >);</span>

</pre>
    </div>
</body>

</html>