title: Image captioning issue
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 span.spacer {
     padding:0 5px;
  }
  h2 span { 
     color: white; 
     font: bold 24px/45px Helvetica, Sans-Serif; 
     letter-spacing: -1px;  
     background: rgb(0, 0, 0); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
     padding: 10px; 
  }
  h2 { 
     position: absolute; 
     top: 50px; 
     left: 0; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;&lt;span&gt;This is the first line.&lt;span class="spacer"&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="spacer"&gt;&lt;/span&gt;This is the second line.&lt;/span&gt;&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Grettings!</p>
  
  <p>So I've developed a funky way of captioning an image as illustrated in the code below. However, as you can see, there are black blocks at the end of the first line and the beginning of the second line which are a darker colour, including the space between the two lines.</p>
  
  <p>Is there any way in which this can be resolved?</p>
  
  <p>Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 span.spacer {
     padding:0 5px;
  }
  h2 span { 
     color: white; 
     font: bold 24px/45px Helvetica, Sans-Serif; 
     letter-spacing: -1px;  
     background: rgb(0, 0, 0); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
     padding: 10px; 
  }
  h2 { 
     position: absolute; 
     top: 50px; 
     left: 0; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;&lt;span&gt;This is the first line.&lt;span class="spacer"&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="spacer"&gt;&lt;/span&gt;This is the second line.&lt;/span&gt;&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>