Same REM measurement results in different pixel values

Question

I am using REM values. At smaller screen sizes my base font-size is equivalent to 9 pixels:

html {
    font-size: 56.25%;
}

(16px x 56.25% = 9px)

I have noticed that Chrome calculates the pixel values differently depending on what is being measured. For example:

I have a

element. The height of which is decided by the line-height: 6.3rem (6.3 x 9px = 56.7px).

header { line-height: 6.3rem }

Chrome calculates this as 57px.

However, if I change the code to

header { height: 6.3rem; }

Chrome calculates this as 57.69px.

If I have a nav positioned absolutely just under the header:

nav { position: absolute; top: 6.3rem; }

Chrome calculates the top distance as 56.7px

These differences are proving a pain as the header and nav have different background colours and a border and Chrome is renduring these sub-pixel differences.

Why would a browser render the same measurement differently?

JSFiddle here: https://jsfiddle.net/79tbdovq/1/

In Chrome there is a sub-pixel border-bottom displayed, that shouldn't display. Although for some reason in JSFiddle it works fine.

user_11044542 · Answer

The behave of line-height is quite trick... (similar subject)

Calcul you made is good but even if you write line-height: 56.7px; it will show line-height: 56px in Chrome tools.

Anyway, if you want a work around working with height and box border:

header {
  height: 6.3rem;              /* ADDED */
  line-height: 6.3rem;
  border-bottom: 1px solid black;
  font-size: 2rem;
  box-sizing: border-box;     /* ADDED */
}

DEMO

html, body {
    font-size: 56.25%;
}
body{
  margin: 0;
}

header {
  height: 6.3rem;             /* ADDED */
  line-height: 6.3rem;
  border-bottom: 1px solid black;
  font-size: 2rem;
  box-sizing: border-box;     /* ADDED */
}

nav {
  position: absolute;
  top: 6.3rem;
  left: 0;
  right: 0;
  background-color: yellow;
  font-size: 2rem;
}

Logo and hamburger
Nav list

Same REM measurement results in different pixel values

1 Answers

DEMO