Match the top of the characters and the bottom baseline of the font <p>Do you know of a reliable way to have borders matching the baseline of the font and the top of the characters? </p> <p>I'm not sure it's very clear as I lack the words to explain this precisely, so here is an example: <a href="http://codepen.io/anon/pen/zwjLf" rel="nofollow">http://codepen.io/anon/pen/zwjLf</a>. This is what I've been able to achieve messing with the line-height property until finding the best value:</p> <pre><code>line-height: 0.7em; </code></pre> <p>But I guess it's not a very clean or reliable way to do it.</p>