Выбор ответа Junior Адаптивность спрашивают часто обновлено
em и rem во вложенных элементах
Вопрос
У html font-size 16px. Какой будет размер шрифта у .inner?
<style>
.outer { font-size: 1.5em; }
.inner { font-size: 1.5em; }
</style>
<div class="outer"><div class="inner">Текст</div></div>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 36px: em в font-size берётся от родителя и копится. В свойстве font-size единица em берётся от размера шрифта родителя: .outer = 16 × 1.5 = 24px, .inner = 24 × 1.5 = 36px.
Варианты ответа
- 24px:
emвfont-sizeвсегда считается отhtml - 16px:
emу вложенного элемента сбрасывается к корню - 36px:
emвfont-sizeберётся от родителя и копитсяправильный ответ - 48px: 1.5em + 1.5em складываются в 3em от корня
Разбор
В свойстве font-size единица em берётся от размера шрифта родителя: .outer = 16 × 1.5 = 24px, .inner = 24 × 1.5 = 36px. От корня считает rem, с ним было бы 24px. Сброса нет. Коэффициенты перемножаются, а не складываются, поэтому не 48px.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.