Falk Falk - 1 year ago 83
CSS Question

CSS padding automatic linebreak

I've following html:

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

and following css:


.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 Source

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!