Является ли em дефолтным?

Краткий ответ: Нет, единица измерения em НЕ является дефолтной (по умолчанию) в CSS. Дефолтной единицей для большинства свойств, особенно для размеров шрифта (font-size), является px (пиксели), если значение указано числом без единиц. Однако важно понимать контекст, так как браузеры устанавливают свои user agent stylesheets с фиксированными px значениями.

Подробное объяснение

1. Что такое "дефолтное" значение в CSS?

В CSS каждое свойство имеет начальное значение (initial value), определенное в спецификации. Для font-size начальным значением является medium, что примерно соответствует 16px в большинстве современных браузеров. Если разработчик указывает числовое значение без единицы, например font-size: 16, это будет ошибкой, и свойство не применится (если только это не line-height, где единицы не обязательны). Таким образом, когда мы говорим о "дефолтных размерах" в браузерах, они заданы в пикселях.

Пример user agent stylesheet (условный):

/* Пример стилей браузера по умолчанию */
body {
  font-size: 16px; /* Дефолтное значение в px */
}
h1 {
  font-size: 2em; /* Но даже здесь браузер рассчитывает 2em от 16px */
}

2. Почему em не является дефолтным?

• em — это относительная единица, основанная на текущем контексте (от font-size родительского элемента). Дефолтные стили браузеров стремятся к предсказуемости, поэтому используют фиксированные px значения для базовых элементов.
• Если бы em был дефолтным, возникла бы циклическая зависимость: font-size: 1em от чего-то, что само по себе не определено. Браузеры решают это, устанавливая корневой размер (обычно 16px).

3. Как работает em?

1em равен текущему font-size элемента. Если у элемента font-size: 16px, то 1em = 16px, 2em = 32px и т.д. Но если font-size самого элемента задан в em, он наследует от родителя, что может привести к каскадным эффектам.

Пример:

<div class="parent">
  Родительский текст
  <div class="child">
    Дочерний текст
  </div>
</div>

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
  padding: 2em; /* 2 * 30px = 60px (относительно своего font-size!) */
}

4. Ключевые отличия em от дефолтного px

5. Практический совет: когда использовать em?

• Для относительных размеров внутри компонентов (например, padding или margin, которые должны масштабироваться с текстом).
• Для доступности: пользователи могут изменить базовый размер шрифта в браузере, и em адаптируется.
• Избегайте вложенных em для font-size, если не нужны каскадные эффекты. Вместо этого используйте rem (относительно корневого элемента html).

Пример с rem:

html {
  font-size: 16px; /* Базовый размер для rem */
}
.component {
  font-size: 1.5rem; /* Всегда 24px (1.5 * 16px) */
  padding: 2em; /* Но здесь em все еще полезен для отступов */
}

Заключение

em — это мощная относительная единица, но она не используется браузерами по умолчанию. Дефолтные стили основаны на px, чтобы обеспечить стабильную базовую сетку. em вводится разработчиками для создания гибких, доступных и масштабируемых интерфейсов. Понимание разницы между px, em и rem критично для профессиональной верстки.