โ† flaviocopes.com

How to apply padding to multiple lines in CSS

Published Apr 06 2021

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! โœจ

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:

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

I added this 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:

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:

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:

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

Then it worked fine, across all browsers:



I write books for developers ๐Ÿ‘‡๐Ÿผ

© 2023 Flavio Copes Flavio Copes made in Italy ๐Ÿ‡ฎ๐Ÿ‡น using Notion to Site Notion to Site