Единицы измерения CSS: rem vs em

18 февраля, 2022 11:40 дп 5 790 views | Комментариев нет

| | Комментировать запись

В CSS есть множество удобных и полезных единиц измерения. Относительные единицы в современном мире адаптивного дизайна (такие как em или rem) дают нам адаптируемость и гибкость прямо «из коробки», позволяя определять размеры элемента на основе размера шрифта, определенного выше в разметке.

Читайте также: Какие бывают единицы измерения в CSS

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

Резюме: единица em в свойстве font-size относится к размеру шрифта родительского элемента. В остальных свойствах em относится к размеру шрифта текущего элемента. Единица rem всегда относится к размеру шрифта корневого элемента html.

Единица измерения em

em заимствована из мира типографики. Это единица, которая позволяет установить размер шрифта элемента относительно размера шрифта его родителя.

Возьмем этот простой пример:

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
}

В этом примере дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).

Если родительский элемент не указывает значение для размера шрифта, значение будет искаться выше в дереве DOM. Если размер шрифта не указан вплоть до корневого элемента (<html>), то используется стандартное значение браузера – 16px.

Довольно просто и ясно, верно? Однако единицы em можно использовать не только для установки размера шрифта – они подходят практически везде (для определения отступов, полей, ширины, высоты, максимальной ширины и т.д.) Если единица em используется для других свойств, а не для font-size, значение относится к собственному размеру шрифта элемента.

Добавим к нашему приведенному выше примеру:

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
  padding: 2em 1em;
}
  • Отступы сверху и снизу на .child будут составлять 54 пикселя. Это в 2 раза больше размера шрифта нашего текущего элемента (2 * 27 пикселей).
  • Отступы слева и справа .child будут иметь размер 27 пикселей. Это в 1 раз больше размера шрифта элемента.

Помните: когда единица em используется в свойстве font-size, размер определяется относительно размера шрифта родителя. При использовании в других свойствах значение зависит от размера шрифта самого элемента.

Недостаток em

С единицей em бывают проблемы – эта единица может компоноваться с одного уровня на другой.

Давайте взглянем на такой базовый пример:

.parent {
  font-size: 15px;
}
.child {
  font-size: 2em;
}

Теперь мы попробуем использовать его в нашей разметке следующим образом:

<div class="parent">
  I'm 15px
  <div class="child">
  I'm 30px, as expected
    <div class="child">
    I'm 60px, trouble starts!
      <div class="child">
      I'm 120px, now we're really in trouble!
      </div>
    </div>
  </div>
</div>

Вот что получится:

I’m 15px
I’m 30px, as expected
I’m 60px, trouble starts!
I’m 120px, now we’re really in trouble!

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

Именно эта проблема и стала причиной для создания модуля rem.

Единица измерения rem

Единица rem, сокращенно от root em, является относительной единицей, значение которой всегда основывается на значении размера шрифта корневого элемента, <html>. И если элемент <html> не имеет конкретного размера шрифта, используется значение браузера по умолчанию, 16 пикселей.

Это означает, что при использовании rem значения родительских элементов игнорируются, во внимание принимается только значение root.

Давайте рассмотрим пример кода с rem:

.html {
  font-size: 16px;
}
.parent {
  font-size: 15px;
}
.child-rem {
  font-size: 2rem;
}

Применим его:

<div class="parent">
  I'm 15px
  <div class="child-rem">
  I'm 32px, as expected
    <div class="child-rem">
    I'm 32px, yep!
      <div class="child-rem">
      I'm 32px, like clockwork!
      </div>
    </div>
  </div>
</div>

И получим:

I’m 15px
I’m 32px, as expected
I’m 32px, yep!
I’m 32px, like clockwork!

Как вы можете видеть, единица rem позволяет избежать «комбинированного эффекта» единицы em. С rem все последовательно основано на font-size или на корневом элементе, так что никаких сюрпризов ждать не приходится.

То же самое относится и к другим значениям помимо font-size (margin, padding и т.д.). Использование единиц rem в них по-прежнему будет относиться к размеру шрифта корневого элемента.

em vs rem: что лучше?

На самом деле нет лучшего варианта, все зависит от ваших личных предпочтений. Некоторым людям нравится проектировать все в единицах rem для согласованности и предсказуемости, в то время как другим нравится использовать единицы em в тех местах, где влияние ближайших родительских элементов имеет смысл. Какую единицу измерения использовать – решать вам.

Tags:

Добавить комментарий