CSS Tip: Apply Padding to Inline Elements across Two or More Lines!

If you place a background colour on a display inline element, for example a headline, the background colour follows the text nicely, even in two or more lines. But the background colour goes right to the edge. In these cases, you may want to add some padding on both sides to give some space to the edge. Normally padding doesn't work on inline elements, but there's a clever solution!

Using border-left and border-right, you can achieve a kind of pseudo-padding that gives a little air to the edge of the element. However, this pseudo padding will only be added to the first line on the left and the last line on the right. To make all lines have uniform padding on all lines, you can use the magic properties -webkit-box-decoration-break and box-decoration-break.

However, these features only work in WebKit/Blink browsers that have this option. So please note that it is important to test your changes in different browsers to ensure compatibility.

Here's an example of how you can use it:

.dInl {
    border-left: solid 8px red;
    border-right: solid 8px red;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

Please note that -webkit-box-decoration-break and box-decoration-break only work in WebKit/Blink browsers that have this option. Therefore, it is recommended to test your changes in different browsers to ensure compatibility.

See an example of the result in action here.