Omer Omer - 3 months ago 11
CSS Question

Background Color behind Heading <h1> with padding with line break

I want to give a background color to

<h1>
and wanted it to extend with the text and with equal paddings on left and right.

It seems ok on single line but when I break a line the padding messed up.

Here's my code:



h1 span {
background: red;
color: #fff;
padding: 0 20px;
}

<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum <br>Doler Sai Bongaro</span></h1>





enter image description here

I want the space after lipsum and before doler in the second
<h1>


And it shouldn't look like a box...

So it look like this:

enter image description here

Answer

you should change the HTML like this :

let me know if it helps

h1  span{
  background: red;
  color: #fff;
  padding: 0 20px;
  display:inline-block; /*optional */
}
<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum </span><br /><span>Doler Sai Bongaro</span></h1>

Comments