title: how to change 'inner' lineheight of css text
body: <p>I'm trying to work with an icon font called entypo. The font is great, but the padding that the developer chose is horrendous, and makes this font infuriating to work with. The icons are really good though and I'm just trying to make it work.</p>
  
  <p>What it boils down to to make the font look 'normal', the font size needs to be huge (like 40px+). </p>
  
  <p>If you're trying to fit the icon into a space of 15px height, the font-size will be 40px and then there is all that extra space you need to deal with.</p>
  
  <p>I have tried setting explicit height, explicit lineheight, vertical-align, in every conceivable combination, and the result is differenct between PC and mac.</p>
  
  <p>The only thing I can think of is that 'leftover space' is handled differently by different operating systems.</p>
  
  <p>Is there some CSS property that I'm not aware of that will fix this?</p>
  
  <p>PC</p>
  
  <p><img src="https://i.stack.imgur.com/cv543.png" alt="enter image description here"></p>
  
  <p>MAC</p>
  
  <p><img src="https://i.stack.imgur.com/ecieM.png" alt="enter image description here"></p>
  
  <p>This is the very hackish CSS I used to try and zero it out as best I could. Keep in mind I've already tried playing with height and lineheight, it always is the same problem, PC always puts it way below where mac puts it.</p>
  
  <pre><code>.icon {
      font-family: 'entypo';
      display: inline-block;
      color: #000;
      font-size: 40px;
      line-height: 0;
      height: 0;
      vertical-align: middle;   
  }
  </code></pre>
  
  <p>For the sake of those images above to demo to you guys, these are the properties I added:
  <code>height: 20px; width: 20px; background: red;</code> only to demonstrate how it renders so differently.</p>