title: How to apply CSS styles to text only
body: <p>I am trying to apply a style to a like of HTML text. What I want is basically:</p>
  
  <p><a href="https://i.stack.imgur.com/9QDTW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9QDTW.png" alt="What I want to get"></a></p>
  
  <p>What I get is basically:</p>
  
  <p><a href="https://i.stack.imgur.com/GvgHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GvgHv.png" alt="What I actually get"></a></p>
  
  <p>As you can see, the first line is indented, but not any other line.  So far, I have the text inside of a <code>&lt;span&gt;</code>, which is nested inside of a <code>&lt;div&gt;</code>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide-text .text {
    background-color: rgba(0, 0, 0, .6);
    color: #FFF;
    padding: 8px 17px;
  }
  .slide-text .slide-title {
    font-family: "Titillium Web", Arial, Helvetica, sans-serif;
    font-weight: 700;
  }
  .slide-text .slide-content {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>My HTML code is:
  &lt;div class="slide-text"&gt;
    &lt;div class="slide-title"&gt;&lt;span class="text"&gt;[TITLE]&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="slide-content"&gt;&lt;span class="text"&gt;[TEXT]&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>They work great, as long as neither the title or the content are more than one line.  As soon as they go over two or more lines, the span loses its inner padding.  Changing the inner span to <code>display: inline-block;</code> gives it a block display as soon as it goes into two lines.  Is there a way to get the effect I am looking for?</p>