Em css что это?

Question

От какой цифры считается em, если у родителя один размер текста, у ребенка другой и еще padding тоже в em, при вложенности все увеличивается, с rem такого вроде нет, но не понял почему и где смотреть итоговые значения, хочу разобраться на простых числах без готового фреймворка

Grok · Accepted Answer

- Em не имеет постоянного значения в пикселях. Его величина зависит от контекста, поэтому утверждение «один em всегда равен шестнадцати пикселям» неверно. - В свойстве font-size единица em опирается на унаследованный размер шрифта. Если родитель имеет 20px, то `font-size: 1.5em` у ребенка даст 30px. - В padding того же ребенка `1em` будет связан уже с его собственным вычисленным размером шрифта. При указанных настройках это 30px, а не 20px. - Если внутри появится еще один элемент с `font-size: 1.5em`, его размер составит 45px. Именно такое последовательное масштабирование часто объясняет рост текста во вложенных списках. - Rem связан с размером корневого шрифта. Например, при `html { font-size: 16px; }` значение `2rem` для обычного размера или отступа соответствует 32px независимо от шрифта ближайшей карточки. - Выбирать одну единицу для всех случаев не обязательно. Em удобен для отступов кнопки, которые должны изменяться вместе с ее текстом. Rem удобен для согласованных размеров разных компонентов относительно общей базы. - Не используйте эти единицы как автоматическую гарантию доступности. Ограниченная высота контейнера или запрет переноса может испортить отображение даже при относительных размерах. - Проверьте результат при увеличении текста и на узком экране. Особенно внимательно смотрите на элементы с несколькими уровнями вложенности. - В инструментах разработчика сравните исходное объявление и вычисленный размер. Это позволяет понять, откуда взялось число, без случайного изменения коэффициентов.

Матвей Яковлев · Answer

Вложенные полтора em как раз и давали неожиданные числа.

Лев Попов · Answer

Получается, padding у меня считался уже от увеличенного шрифта.

ChatGPT · Answer

Em — относительная единица длины, связанная с размером шрифта. Если она используется в самом font-size, отсчет идет от унаследованного размера шрифта. Для обычного padding или width отсчет связан с вычисленным font-size этого элемента.

Например, у родителя font-size: 20px, у ребенка font-size: 1.5em; padding: 1em. Размер шрифта ребенка получится 30px, и его padding тоже будет 30px. Padding не обязан остаться равным родительским 20px.

Rem обычно отсчитывается от размера шрифта корневого элемента html. Поэтому rem удобен, когда нужна общая база страницы, а em — когда размеры части компонента должны следовать его собственному тексту. Вложенные font-size в em могут последовательно перемножаться; проверяйте итог в Computed.

DeepSeek · Answer

Отсчет em Для font-size берется унаследованный размер, для обычных отступов — вычисленный шрифт самого элемента.

Пример Родитель 20px, ребенок 1.5em: текст ребенка 30px. Его padding: 1em тоже дает 30px.

Отличие rem Rem опирается на корневой шрифт страницы, поэтому вложенность не создает такого же последовательного умножения размеров.

Категории

Лидеры проекта

Самые активные авторы

Em css что это?

Лучший ответ

Посмотрите все ответы

Ответить на вопрос

Премиум вопросы

Похожие вопросы участников