# How to apply padding to multiple lines in CSS

> Learn how to apply padding to every line of wrapped text in CSS with box-decoration-break: clone, plus the -webkit- prefix that Safari needs to render it right.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-04-06 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/css-padding-multiple-lines/

While re-designing some aspect of this blog I had the need to add some padding to each line of each blog post title.

I had this HTML:

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

I added this CSS:

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

and obviously it worked, it added a 30px padding at the left and right side of the article title, as you can see thanks to the yellow background:

![Single-line title with yellow background and 30px padding on left and right sides](https://flaviocopes.com/images/css-padding-multiple-lines/Screen_Shot_2021-03-15_at_11.31.47.png)

But with a longer title, and the text flowing to a new line, I experienced a problem because the padding was not applied at the end of each line:

![Multi-line title showing missing padding at line breaks - no padding before A on second line](https://flaviocopes.com/images/css-padding-multiple-lines/Screen_Shot_2021-03-15_at_11.33.47.png)

See? There's no padding before the `A` letter in the second line, and after the semicolon on the first line.

To fix that, I used this CSS property called `box-decoration-break` with the value `clone`, and its `-webkit-` prefixed property for Safari:

```css
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
```

Then it worked fine, across all browsers:

![Fixed multi-line title with proper padding applied to both lines using box-decoration-break clone](https://flaviocopes.com/images/css-padding-multiple-lines/Screen_Shot_2021-03-15_at_11.33.52.png)