When an h1 element has a line-height set on it and no other height, no matter whether the line-height is set in rems or pixels, the calculated height of the element is rounded down. Checked in Chrome and Firefox.
Why is this?
In both cases, I would expect the h1's height to be the same as its line-height, however the element's height is rounded down to 20px. Setting an explicit height the same as the line-height visibly shows a change in height, so it isn't an issue with the inspector's output.
<header> <h1 class="with-rems">Some Text</h1> </header> <header> <h1 class="with-px">Some Text</h1> </header> Sass:
.with-rems { margin: 0; font-size: 1rem; line-height: 1.3rem; } .with-px { margin: 0; font-size: 16px; line-height: 20.799999237060547px; } 