The span element is inline, so it just changes the background for where you've placed it. Since it's also within a <pre>
tag, if you want it to change the background for whitespace around the text too, then you can include that whitespace within the span.
For example, this would make the background change for some whitespace at the end of each line as well as behind the text (but only because of the pre
is the whitespace is taken into account, without the pre the whitespace would be ignored as normal.)
<pre>
some text
<span style="background-color:#ddd;">and some text <br/>
with a different background </span>
and some more text
</pre>
What is preventing you from using a block element? It would be much better to either make the span display as a block element rather than inline when it's in this specific part or just use a block element to begin with, rather than a span. For example,
<html>
<head>
<style>
pre span { display: block; }
</style>
</head>
<body>
<pre>
some text
<span style="background-color:#ddd;">and some text<br/>
with a different background</span>
and some more text
</pre>
</body>
</html>
display: block
a problem for some reason?✓
Accepted Answer. At first glance, one might be prone to heed the advice on the first response, instead scrolling to find the more accurate ones below.)