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