title: CSS padding automatic linebreak
body: <p>I've following html:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;
      &lt;h1&gt;
          a very long long long, really very very long headline ...
      &lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and following css:</p>
  
  <pre><code>.container{
    width:200px;
  }
  
  .header h1{
    background-color: #e0e0e0;
    display: inline;
    padding: 2px 8px;
    color: black;
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>How can I change this? Any trick available?</p>
  
  <p>Great greetings, Falk</p>