Клавиша / esc

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.

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

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировано

Что такое em

Скопировано

Единицы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.

Это означает, что если установите размер шрифта в родительском <div> как 20px и размер шрифта дочернего <div> как 2em, размер шрифта в дочернем <div> будет равен 40px.

Что такое rem

Скопировано

rem — это ещё одна относительная единица для величины шрифта в CSS. Так как em равен размеру пункта текущего шрифта, то rem относится к размеру шрифта корневого элемента. Обычно это тег <html>.

Польза для доступности

Скопировано

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

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