0

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.

Codepen Here

<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;
}
Undistraction
  • 42,754
  • 56
  • 195
  • 331
  • A pixel always needs to be an integer. (would be hard to fill half a pixel with 1 color and the other half with another). As for the rounding down, I suspect is just made to do so. – dwana Jul 23 '14 at 09:51
  • @dwana The first example uses rems and as I mention in the question, using a fractional value explicitly causes a visible height change. Also, fractional values for pixels have been supported for a long time: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units – Undistraction Jul 23 '14 at 09:59
  • @cimmanon How is this question a duplicate. It asks about line-height in relation to height. The question you've marked as a duplicate talks about percentage related to width. – Undistraction Jul 23 '14 at 10:33
  • a pixel is the smallest possible thing your display can show, so it has to be an integer !A rem has a size of more then 1 pixel let's say 16, and you can do 16*1.3 (if you need more info search for "subpixel rendering") – dwana Jul 23 '14 at 10:52
  • @Pedr Do you honestly think the browser rounds differently when the value in question is on line-height vs any other property? The linked question is not limited to percentages. – cimmanon Jul 23 '14 at 11:04
  • @cimmanon There's no need to be condescending. Obviously I don't think that. However you are conflating questions and answers. I wasn't looking for an answer or question on browser treatment of height/width, but in its treatment of height when height is defined by line-height. Although the question you marked as a duplicate has an answer that explains this one, the intention of the question is completely different. It's like closing 'Why does rain fall downwards?' because it is a dupe of 'how does the atmosphere remain in place?' The answer to both is gravity but they are different questions. – Undistraction Jul 23 '14 at 11:20

0 Answers0