title: CSS: Understanding and adjusting leading / line-height of fonts
body: <p>A very similar question was asked <a href="https://stackoverflow.com/questions/13701110/css-remove-line-height-leading-on-larger-text">here</a> but the really answered sufficiently...</p>
  
  <p>The CSS line-height property controls the amount of white space above the letters. Making it bigger/smaller spaces rows of text farther/closer together. But if you set the line height to the exact same value as the font-size, the text will still have white space above them.</p>
  
  <p>So this DOESN'T quite work...</p>
  
  <pre><code>div { height: 80px; }
  span { font-size : 80px; line-height : 80px; }
  &lt;div&gt;
  &lt;span&gt;Foo&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/s_d_p/yMHVs/" rel="nofollow noreferrer">http://jsfiddle.net/s_d_p/yMHVs/</a></p>
  
  <p>The degree to which the enclosed text actually matches the container height seems to differ from font to font. </p>
  
  <p>So my question is two parts:</p>
  
  <ol>
  <li><p>What are we actually adjusting when we set line-height?</p></li>
  <li><p>Is there a way to remove it entirely so that letter fit precisely inside their container?</p></li>
  </ol>