CSS padding automatic linebreak

Question

I've following html:

<div class="container">
  <div class="header">
    <h1>
        a very long long long, really very very long headline ...
    </h1>
  </div>
</div>

and following css:

.container{
  width:200px;
}

.header h1{
  background-color: #e0e0e0;
  display: inline;
  padding: 2px 8px;
  color: black;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
}

The problem is, that the browser adds a linebreak because of the long header and small width of the wrapping container. Thats fine. But the padding-left will not be added to the broken second and further lines. I can do this with an negative text-indent and positive padding-left to .header. but the background-color will not be moved to left so it seems as would be there still a zero padding.

How can I change this? Any trick available?

Great greetings, Falk

Answer 1

Try changing display: inline; to display: inline-block;.

As I understand it, left and right padding on inline elements will be applied to the beginning and end of the element, regardless of whether there's any line break in between. On a block (or inline-block) element, the padding is applied to the left and right of the entire element.

See https://developer.mozilla.org/en-US/docs/Web/CSS/display for a lot more information!