rem, em

Относительные единицы измерения, которые считаются от размера шрифта.

Время чтения: меньше 5 мин

Кратко

Скопировано

Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg>rem (от root ephemeral unit — «главная относительная единица»).

Пример

Скопировано

Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:

        
          
          html {  font-size: 16px;}
          html {
  font-size: 16px;
}

        
        
          
        
      

Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

        
          
          .block {  font-size: 1.5rem;}
          .block {
  font-size: 1.5rem;
}

        
        
          
        
      

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

        
          
          .block__elem {  width: 5em;}
          .block__elem {
  width: 5em;
}

        
        
          
        
      

А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

        
          
          .block__elem {  width: 5em;  font-size: 2em;}
          .block__elem {
  width: 5em;
  font-size: 2em;
}

        
        
          
        
      

Как пишется

Скопировано

Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:

        
          
          .selector {  width: 10em;}.selector {  margin: 5rem;}
          .selector {
  width: 10em;
}

.selector {
  margin: 5rem;
}

        
        
          
        
      

Как понять

Скопировано

Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border-width и так далее.

Итоговое значение размера, заданное через em и rem, вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem, изменится.

Подсказки

Скопировано

💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:

        
          
          html {  font-size: 62.5%;}
          html {
  font-size: 62.5%;
}

        
        
          
        
      

Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

На практике

Скопировано

Realetive советует

Скопировано

🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.

Алёна Батицкая советует

Скопировано

🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:

        
          
          html {  /* 10px */  font-size: 62.5%;}.title-block {  /* 10rem * 10px = 100px */  width: 10rem;  /* 2rem * 10px = 20px */  font-size: 2rem;}@media (max-width: 640px) {  html {    /* 8px */    font-size: 50%;  }}
          html {
  /* 10px */
  font-size: 62.5%;
}

.title-block {
  /* 10rem * 10px = 100px */
  width: 10rem;
  /* 2rem * 10px = 20px */
  font-size: 2rem;
}

@media (max-width: 640px) {
  html {
    /* 8px */
    font-size: 50%;
  }
}

        
        
          
        
      

Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇