Маржа и прокладка с использованием em
Когда 1em применяется к элементу, оно принимает значение по умолчанию браузера (обычно 16 пикселей) или значение размера шрифта его родителя, правильно?. Но я заметил, что если я использую что-то вроде margin-top: 1em в элементе h1 (без использования таблицы стилей reset, и поэтому h1 устанавливается на font-size: 32px), то 1em равно 32px, даже если его родительский элемент имеет значение font-size: 16px.
Однако, используя что-то вроде font-size: 100%; решает несоответствие.
Что мне не хватает?
Ответы
Ответ 1
Когда 1em применяется к элементу, оно принимает значение по умолчанию для браузера (обычно 16 пикселей) или значение размера шрифта для его родителя, правильно?
Нет, он берет свой собственный font-size, вычисляемый на основе его родительского (или по умолчанию значения, заданного браузером). Поскольку предоставленный браузером font-size из h1 составляет 32 пикселя, результирующий запас составляет 32 пикселя.
Однако, используя что-то вроде font-size: 100%; решает несоответствие.
Установив font-size: 100%; или font-size: 1em; на элемент, вы говорите ему, чтобы использовать 100% размера шрифта своего родителя, поэтому установка 1em как длины на что-либо еще будет следовать за 100%.
Ответ 2
1em равен размеру шрифта соответствующего элемента. Поэтому, когда вы используете его с полями, он будет эквивалентен размеру шрифта элемента, который вы тоже применяете.
