Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Что такое em

Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Один em — это размер шрифта, заданный на текущем элементе. Если размер шрифта не указан явно, используется размер родителя. Например:

.box {
  font-size: 16px;
  padding: 2em;
}

В этом случае padding будет равен 32 пикселя, потому что 2 × 16 = 32. А если на родителе задан font-size: 20px и в .box ничего не указано — то 2em будет уже 40 пикселей.

Где используют em

  • Размер шрифта: font-size: 1.2em — увеличить шрифт на 20% относительно базового.
  • Отступы: padding, margin, gap — автоматически адаптируются под текст.
  • Ширина и высота: width: 10em — сделать блок в ширину, кратную шрифту.

Наследование и вложенность

Важно помнить: em умножается на значение родителя. Если у вас есть вложенные блоки, каждый новый уровень будет «наследовать» масштаб:

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.2em; /* 24px */
}
.subchild {
  font-size: 1.2em; /* 1.2 × 24px = 28.8px */
}

Такое поведение можно использовать осознанно для масштабирования, либо избегать его — и задавать размеры в rem, если нужна стабильность.

Пример: блок с пропорциональными отступами

.card {
  font-size: 16px;
  padding: 1.5em; /* 24px */
  border: 1px solid #ccc;
  width: 20em; /* 320px */
}

Такой блок сохранит пропорции, если пользователь увеличит шрифт браузера — и останется читаемым и аккуратным.

Когда em — лучшее решение

  • Когда вы делаете интерфейс, который должен быть удобным при масштабировании.
  • Если хотите, чтобы элементы адаптировались к шрифтам разных языков или настроек.
  • Для модулей, которые должны сохранять пропорции независимо от внешнего окружения.

em — мощный инструмент для создания адаптивной типографики и интерфейсов. Он требует внимательности к контексту, но позволяет легко управлять масштабом и пропорциями элементов на странице.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.