title: Solid background behind text in multi-line p element
body: <p>On this slider that I'm working on, I want the description on the slide to have an orange background behind the text with a little padding on the beginning and ends of the row. I changed the p tag's display to inline and this works when it is only one line, however when the text wraps to the next line the CSS only applies the left/right padding to the left side of the first line and the right side of the last line.</p>
  
  <p>How can I have the padding on the left and right of each line of text without having a solid orange square the size of the full width of the container?</p>
  
  <p>It's the text in the slider that reads "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Lorem ipsum dolor sit amet."</p>
  
  <p><a href="http://www.brainbuzzmedia.com/themes/simplybusiness/" rel="nofollow noreferrer">http://www.brainbuzzmedia.com/themes/simplybusiness/</a></p>
  
  <p>Here's the CSS for that <code>p</code> tag:</p>
  
  <pre><code>.camera_caption p {
      background: none repeat scroll 0 0 #FFAA3B;
      color: #000000;
      display: inline;
      font-size: 1.7em;
      margin: 0;
      padding: 3px 7px;
  }
  </code></pre>