为什么 rems 并不总是以相同的结果计算

Question

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>

Answer 1

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>