title: How can I mix vertically-centered elements with different font sizes and retain consistent line height?
body: <p>When you mix font-sizes of elements with <code>vertical-align: middle</code> inside of a container, the container's height can be larger than the line-height or height of either individual element. Here is a <a href="http://jsfiddle.net/89bcs62y/11/">fiddle</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    line-height: 20px;
    font-size: 14px;
  }
  .smaller {
    font-size: 0.9em;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="body"&gt;
    &lt;div class="why-not-twenty-px"&gt;
      containing div has height &lt;span class="smaller"&gt;&amp;bull;&lt;/span&gt; of 21px, not 20px
    &lt;/div&gt;
    &lt;div class="why-not-sixty-px"&gt;
      containing div has height of 61 px, not 60px multiline multiline multiline multiline multiline multiline &lt;span class="smaller"&gt;&amp;bull;&lt;/span&gt; multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this example, the two containing divs are 21px and 61px instead of 20px and 60px.</p>
  
  <p>How can I retain a container height that is a multiple of the line-height when mixing in an element like <code>.smaller</code>? <code>.smaller</code> must be vertically centered on the line. Ideally, any solution would only involve CSS changes to <code>.smaller</code>.</p>