Как получаются, не всегда вычисляются суммы с одним и тем же результатом?

Question

Может кто-нибудь объяснить мне это поведение? https://codepen.io/anon/pen/BrRpeB

Я не понимаю, как вычисленный размер шрифта больше для внутреннего <span> элемент, чем внешний <code> элемент...

: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, как я уверен, вы знаете, обозначает root em, а em основаны на размере шрифта родительского элемента. Поскольку размер шрифта для каждого элемента в вашем примере представляет собой процент, как и в процентах от размера элемента, элементы разного размера вызывают создание шрифтов разных размеров. Если исходный размер шрифта корня был задан как пиксели, результатом были бы элементы, содержащие шрифт того же размера, например фрагмент кода ниже.

: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>