title: Extra space before and after H1 tag
body: <p>Even after reseting margin and padding the h1 tag still has mysterious unwanted gaps before and after its content</p>
  
  <p><a href="http://codepen.io/anon/pen/ONNged" rel="noreferrer">see code pen</a></p>
  
  <p>Adding</p>
  
  <pre><code> line-height:0.7em;
  </code></pre>
  
  <p>rule approximately resolve the problem, however</p>
  
  <ol>
  <li>it looks unclean</li>
  <li>there are still few unwanted pixels </li>
  <li>not sure that this will not cause issues with different font size or units.</li>
  </ol>
  
  <p>Is there a clean and universal solution, maybe using sass/less mixin with math operations?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1&gt;Some text&lt;/h1&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* { margin:0;padding:0; }
  h1 { font-size:25em; } 
  </code></pre>