How to Apply Padding to Multiple Lines in CSS

In this blog post, I will show you how to apply padding to multiple lines using the box-decoration-break CSS property. I recently encountered a situation where I needed to add padding to each line of a blog post title while redesigning my blog.

Here is the HTML code for the blog post title:

1
2
3

<h1 class="post-title">
 <span>{{ .Title }}</span>
</h1>

To add the desired padding, I applied the following CSS:

.post-title span {
 padding: 0px 30px;
 background-color: rgb(254,207,12);
}

This CSS code successfully added a 30px padding to the left and right sides of the article title. The yellow background color confirms the padding’s presence.

However, I encountered a problem when the title had multiple lines. The padding was not applied at the end of each line, resulting in an uneven appearance.

To resolve this issue, I used the box-decoration-break CSS property with the value of clone. For Safari compatibility, I also included the -webkit- prefixed property. Here is the updated CSS code:

1 2	-webkit-box-decoration-break: clone; box-decoration-break: clone;

By adding this CSS code, the padding was correctly applied to each line of the title, regardless of the line break. The issue was resolved, and the desired appearance was achieved across all browsers.

CSS Padding on Multiple Lines

By following these steps and using the box-decoration-break CSS property, you can easily apply padding to multiple lines in your CSS code.