title: Creating highlight effect on text with padding using CSS
body: <p>I am trying to create highlighted text effect with line break(s).</p>
  
  <p>Example: </p>
  
  <p><img src="https://content.screencast.com/users/TwinCitiesTech.com/folders/Jing/media/393d686b-8395-4e94-9b57-be0c273c1b78/2011-05-26_1042.png" alt="highlighted text effect"></p>
  
  <p>I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:</p>
  
  <pre><code>background: none repeat scroll 0 0 #1B1615;
  display: inline;
  font-size: 15px;
  line-height: 24px;
  padding-left: 5px;
  </code></pre>
  
  <p>When adding padding it only adds padding to beginning of the text and the end, as seen here:</p>
  
  <p><img src="https://content.screencast.com/users/TwinCitiesTech.com/folders/Jing/media/45b5dab5-101c-459a-a810-57b2bf887e99/2011-05-26_1044.png" alt="Added Padding"></p>
  
  <p>CSS:</p>
  
  <pre><code>background: none repeat scroll 0 0 #1B1615;
  display: inline;
  font-size: 15px;
  line-height: 3em;
  padding: 10px;
  </code></pre>
  
  <p>Does anybody have any idea on how to make this happen?</p>