There are many weird quirks that you encounter as a web developer.

Generally, they are small things that you would not likely expect to occur. And these small things seem very obvious and trivial to fix. So obvious, that after you try all the things that first come to mind, that you may overlook perhaps an easy solution.

One of these situations may be encountered with padding and line wrapping. Here’s a nice example.

<div style="width:450px;"><h1 style="font-size:32px; line-height: 65px; margin-top:5px; margin-bottom:5px; color:black; margin:0 10px;">
<span style="background-color: #00a5eb;padding: 2px 0px;padding:0 10px;">A Geek and His Awesome Blog of Doom</span>
</h1></div>

This produces the following header / H1 text that uses span tags to highlight the text with a nice background:

We have a H1 with a span background for a nice highlight effect and padding on the left and right. Notice something here? The padding disappears on the right when the linewraps. And the beginning of the next line has no padding on the left! What’s up with that?

Fortunately, there is a solution. And it’s easy.

<div style="width:450px; margin-left:10px;"><h1 style="font-size:32px; line-height: 65px; margin-top:5px; margin-bottom:5px; color:black; margin:0 10px;">
<span style="background-color:#00a5eb; padding:2px 0px; box-shadow:10px 0 0 #00A5EB, -10px 0 0 #00A5EB;">A Geek and His Awesome Blog of Doom</span>
</h1></div>

This makes the following:

We get rid of our padding and instead, use BOX-SHADOW, as well as a margin on the div to push out the text since the box-shadows extend passed the content area.

Unlike some other solutions for fixing this problem, this method supports having a gap between lines of text.

Note though that box-shadow isn’t supported by older browsers.