title: automatically set line-height so that there is no spacing at top and bottom
body: <p>Text in html has a <code>line-height</code> attribute that determines how much <code>vertical space</code> the characters are given. By default, <code>font size</code> and <code>vertical space</code> do not match. If a <code>span</code> has <code>50px font size</code>, <code>line-height</code> of <code>50px</code> will produce a spacing at the bottom and top of the text.</p>
  
  <p><a href="http://jsfiddle.net/7vNpJ/773/" rel="nofollow noreferrer">http://jsfiddle.net/7vNpJ/773/</a></p>
  
  <p>You can fix this by manually adjusting the <code>line-height</code>, such as in this example:</p>
  
  <p><a href="http://jsfiddle.net/7vNpJ/774/" rel="nofollow noreferrer">http://jsfiddle.net/7vNpJ/774/</a></p>
  
  <pre><code>&lt;span&gt;
      BIG TEXT
  &lt;/span&gt;
  
  span {
      display: inline-block;
      font-size: 50px;
      background-color: green;
      line-height:0.7;
  }
  </code></pre>
  
  <p>Line height of 0.7 only works for this particular font. I am looking for a way to perform this automatically, regardless of the font applied.</p>
  
  <p>So basically I am looking for equation or procedure to set font-size and line-height so that there is zero spacing on top and bottom. What do you recommend that I do? A library that contains a matching line-height for many fonts would also do the trick.</p>