CODEWITHSUNDEEP
htmlcss
Thomas Hertog
Thomas Hertog

Reputation: 19

How come rems are not always computed with the same result

Can anyone explain this behavior to me? https://codepen.io/anon/pen/BrRpeB

I don't understand how the computed font-size is larger for the inner <span> element than the outer <code> element...

:root {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span, code, div {  font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>

Upvotes: 2

Views: 193

Answers (1)

Noise859
Noise859

Reputation: 11

REM as I'm sure you know stands for root em, and em's are based on the font-size of the parent element. Since the font size for each element in your example is a percentage, as in a percentage of the element size, the differently sized elements cause different font sizes to be produced. If your original root font-size was a set amount like pixels, the result would be elements containing the same sized font, such as the code snippet below.

:root {
  font-size: 16px; /* font-size 1em = 10px on default browser settings */
}
span, code, div {  font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>

Upvotes: 1

Related Questions