CODEWITHSUNDEEP
css
Bob van Luijt
Bob van Luijt

Reputation: 7588

Do REMs always come from font-size in html?

Let's say I have:

html {
  font-size: 20px;
  padding: 8px;
}

div {
  font-size: 0.5rem;
  padding: 0.5rem;
}

Will the padding in the div then be 4px (so from padding in html{}) or 10px (form font-size in html{})?

Upvotes: 1

Views: 43

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

The CSS Values and Unites Module Level 3 states:

rem unit

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

You can try this yourself by inspecting your div element and looking at the computed values:

html {
  font-size: 20px;
  padding: 8px;
}

div {
  font-size: 0.5rem;
  padding: 0.5rem;
}
<div>Hello, world!</div>

Example

So yes, as we can see, the padding has been computed at 10px - half the font-size.

Upvotes: 2

Related Questions