title: Why does a span affect the vertical positioning of a sibling span
body: <p>In the following HTML page, I have a div, which contains two spans (<code>span1</code> and <code>span2</code>), the second of which contains a sub-span, <code>span2a</code>. The <code>span1</code> contains text, as does the <code>span2a</code>.  With this setup, the vertical alignment of the text differs, and I can't work out why.</p>
  
  <p>To complicate matters, there are style attributes on the <code>span2</code> and <code>span2a</code>. I have no control over these, as they're injected at runtime by the jQuery cycle plugin.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt; 
      &lt;style type="text/css"&gt;
          body {margin: 0; padding: 0; font-family: arial; color: black;}
          .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;}
          .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;}
          .ticker &gt; span:first-child { background-color: #bfb; }
          .tickerscroll { display: inline-block; background-color: #bbf; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="ticker"&gt;
              &lt;span class="span1"&gt;LABEL: &lt;/span&gt;
              &lt;span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; "&gt;
                  &lt;span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; "&gt;The value (in a sub-span; note that Label is lower then this text)&lt;/span&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="ticker"&gt;
              &lt;span class="span1"&gt;LABEL: &lt;/span&gt;
              &lt;span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "&gt;
                  &amp;nbsp;&lt;span class="span2a" style="position: absolute; top: 0px; left: 0px; "&gt;The value (this time, I've added a &amp;amp;nbsp; outside this inner span)&lt;/span&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="ticker"&gt;
              &lt;span class="span1"&gt;LABEL: &lt;/span&gt;
              &lt;span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "&gt;
                  The value (this time, the inner span span2a is not present at all)
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see from my code, I've added two variants which "fix" the issue:</p>
  
  <ol>
  <li>Add some text (any text, in my case I've added a non-breaking space) inside the <code>span2</code> outside of <code>span2a</code>.</li>
  <li>Remove the sub-span altogether, and have the text just inside the second top-level span. However, this isn't an option for me, as the presence of span2a is required to make the jQuery cycling work.</li>
  </ol>
  
  <p>Is there a way to make the two pieces of text aligned the same without having to artifically throw a &amp;nbsp; into <code>span2</code>?  The solution cannot change the style attributes of any of the span elements, but can add CSS classes if necessary.</p>