title: <small> tag makes height of paragraph larger
body: <p>I have the following fiddle:</p>
  
  <p><a href="http://jsfiddle.net/tompazourek/sn5jp/" rel="nofollow noreferrer">http://jsfiddle.net/tompazourek/sn5jp/</a></p>
  
  <pre><code>&lt;p&gt;some normal-sized text&lt;/p&gt;
  
  &lt;p&gt;some &lt;small&gt;small&lt;/small&gt;-sized text&lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>p { line-height: 20px }
  </code></pre>
  
  <hr>
  
  <p>When I inspect the page in Chrome, I find out that the computed height of the first paragraph is 20px, but the computed height of the second paragraph is 21px.</p>
  
  <p>Why is the <code>&lt;small&gt;</code> tag causing these problems? <strong>How can I fix this?</strong></p>
  
  <p>Every occurence of <code>&lt;small&gt;</code> in the paragraph text messes up my <a href="http://alistapart.com/article/settingtypeontheweb" rel="nofollow noreferrer">baseline grid</a>.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> I later also found an interesting article relevant to this topic: <a href="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" rel="nofollow noreferrer">Deep dive CSS: font metrics, line-height and vertical-align</a>.</p>