JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<p>An inline element. Height is greater than <code>60px</code> (<code>69px</code> on my computer). Basically, Chrome isn't honoring <code>line-height: 60px</code>.</p>
<span class="container">Åj</span>

<p>A block element. Height is <code>60px</code>, but the <em>text</em> inside is greater than <code>60px</code>. (Highlight it to see.) This simply moved the issue to the text node, which will always be an inline element. </p>
<div class="container">Åj</div>

<p>A block element with the text forced to be exactly <code>60px</code> (on my computer, on a particular browser) by using <code>font-size: 52px</code>.</p>
<div class="container forced">Åj</div>

<p>Unfortunately, <code>52px</code> not only changes the font size, but it will be a different number on different computers and browsers.</p>

CSS

.container {
    background-color: lightgreen;
    height: 60px;
    max-height: 60px;
    line-height: 60px;
    font-size: 60px;
}

.forced { font-size: 52px;}