title: Adding padding for text
body: <p>In the following example the heading text is on several lines. Is it somehow possible to add the <strong>left and right padding</strong> on each line (without wrapping each word in a different element, of course)?</p>
  
  <p>If not possible with CSS only, can it be done with jQuery?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
  &lt;h1&gt;Donec commodo sapien lectus, nec gravida magna&lt;/h1&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      width: 100px;
  }
  
  h1{
      display:inline;
      background:green;
      color:#fff;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/289oo48b/" rel="nofollow noreferrer">http://jsfiddle.net/289oo48b/</a></p>
  
  <p><img src="https://i.stack.imgur.com/OQfjj.png" alt="enter image description here"></p>