title: CSS - apply padding to inline element across two lines
body: <p>I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):</p>
  <p><a href="https://i.stack.imgur.com/noN7J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/noN7J.png" alt="" /></a></p>
  
  <p>My CSS is as follows (edited to show relevant rules)</p>
  <pre><code>h1 {
      color: #fff;
      line-height: 1.4;
      background: #41a293;
      padding: 2px 4px; 
      display:inline;
  }
  </code></pre>
  <p>This produces the following result:</p>
  <p><a href="https://i.stack.imgur.com/ep8L9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ep8L9.png" alt="" /></a></p>
  
  <p>I get padding at the start of the element ('S'), and at the very end ('e'), but not where the text breaks. The break happens due to the width of it's parent DIV. This will happen often and is necessary.</p>
  <p>Is there any way to ensure the element gets even padding at the points where the text breaks?</p>
  <p>Many thanks
  Dave</p>
  <p>EDIT - I should have also said that the text content will display via a CMS (Wordpress).</p>