title: What's the deal with vertical-align: baseline?
body: <p>I thought I knew my way around CSS, but I needed to explain something to someone just now and I found I couldn't.</p>
  
  <p>My question basically boils down to: why is <code>vertical-align:baseline</code> ignored when there are other alignments in the same line?</p>
  
  <p>Example: if the second span has <code>vertical-align:bottom</code>, the first span's vertical alignment is ignored if it is <code>baseline</code>; it behaves as if it has <code>bottom</code> too.</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>span:first-child {vertical-align:baseline}
  span:last-child {font-size:3em; vertical-align:bottom;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;span&gt;one&lt;/span&gt; &lt;span&gt;two&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>While if all the spans have a vertical-align other than <code>baseline</code>, or, if they are all <code>baseline</code>, then they behave as expected.</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>span:first-child {vertical-align:top}
  span:last-child {font-size:3em; vertical-align:bottom;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;span&gt;one&lt;/span&gt; &lt;span&gt;two&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </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>span:first-child {vertical-align:baseline}
  span:last-child {font-size:3em; vertical-align:baseline;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;span&gt;one&lt;/span&gt; &lt;span&gt;two&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If this is normal behaviour, then why isn't it described anywhere? I haven't found any source that says baseline and top/bottom interfere with each other in such a way.</p>