title: Vertical & horizontal flow with line height on <small> tag
body: <p>I'm sorting out my typography for a new website and have a strange occurrence with the <code>&lt;small&gt;</code> tag - it's throwing my line-height out. Everything else is fine (heading tags, paragraph etc) but the <code>small</code> is throwing it out somewhere.</p>
  
  <p>Here's an image of what I mean:</p>
  
  <p><img src="https://i.stack.imgur.com/FtzXV.png" alt="enter image description here"></p>
  
  <p>My question is where is this extra little bit of <code>line-height</code> coming from and how can I correct it?</p>
  
  <p>There's a demo at <a href="http://jsfiddle.net/nq2dt/" rel="nofollow noreferrer">http://jsfiddle.net/nq2dt/</a> and code below.</p>
  
  <p>I'm using <code>rem</code> units so this won't be compatible with IE8 and below for now. I'm on Firefox 19.0.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;Main Heading&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;p&gt;&lt;small&gt;Small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here.&lt;/small&gt;&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;h2&gt;Sub heading&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;h3&gt;Sub heading&lt;/h3&gt;
      &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html { font-size: 100%; }
  
  body { font-size: 1rem; line-height: 1.75rem; font-family: open sans; text-align: justify; margin: 0; }
  
  h1 { font-size: 2.625rem; margin: 0 0 1.75rem; }
  h2 { font-size: 1.625rem; margin: 0 0 1.75rem; }
  h3 { font-size: 1.25rem; margin: 0 0 1.75rem; }
  p { font-size: 1rem; margin: 0 0 1.75rem; line-height: 1.75rem; }
  small { font-size: 0.8125rem; }
  
  div { width: 48%; margin: 0 1%; float: left; }
  </code></pre>