Ответ 1: Таким образом, если вы установите padding:1.5rem , размер будет соответствовать размеру корневого шрифта корневого HTML, который составляет 24 пикселя. (1rem по умолчанию равен 16px)

Он дополнительно установит пространство заполнения в соответствии с заданным значением и умножит его на размер шрифта корневого элемента (HTML).

Ответ 2: И это вызывает то же самое с em , это умножит значение em в соответствии с заданным размером шрифта. По умолчанию это 12px для 1em. Поэтому, если вы установите paddind:1.5em , он добавит отступ в 16 пикселей.

Может это поможет.

Примечание: значения от em до пикселей и от rem до пикселей могут различаться соответственно.

rem vs em — все, что вам нужно знать

Введение​

CSS является важной частью дизайна любого веб-сайта, но понимание нюансов его использования может быть сложным. Одна из самых важных вещей, которую нужно понять, — это разница между использованием rem и em в CSS и почему/когда вы должны использовать их.

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

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

Шаги, которые мы рассмотрим в этой статье:

• Единицы em и rem в CSS
• Что такое CSS em
• Что такое CSS rem
• Различия между единицами em и rem
• Когда использовать единицы em и rem в CSS

Предварительные требования

В этой статье предполагается, что читатель хорошо разбирается в CSS. Хотя вам не обязательно быть богом CSS (привет, Кевин Пауэлл), было бы полезно, если бы основные термины CSS не смущали вас.

единицы em и rem в CSS​

При поиске способов указания длины в CSS мы избалованы выбором. Все единицы измерения длины в CSS делятся на две категории.

Абсолютные длины: Абсолютные длины, как следует из названия, являются абсолютными; они фиксированы и ни на что не реагируют. Это означает, что что бы ни случилось, они будут одного размера. Абсолютная длина включает см, мм, дюймы, пиксели, точки и ПК. Относительная длина: Относительная длина — это единицы, которые определяют длину относительно другой единицы, т. е. они реагируют на основе других указанных единиц или элементов. Они включают %, vmax, vmin, vh, vw, ch, ex и единицы, о которых мы будем говорить, em и rem.

Если вы хотите узнать больше об этих юнитах, вы можете сделать это здесь. Теперь давайте посмотрим на два модуля, ради которых мы сюда пришли.

Что такое CSS em

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

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

Сначала напишем HTML

  
  
  
  
  
  
  
  
  
 
 
 Я родительский div, установленный на 20px 
 
 
 Я дочерний div, установленный на 2em, т.е. 40px. 
 
 
 
 
  
  
 Далее CSS. 
 
 .parent{ 
 размер шрифта: 20 пикселей; 
 } 
 
 .child{ 
 размер шрифта: 2em; 
 } 
 
 p { 
 размер шрифта: 1. 5em; 
 } 
 
 

Это даст нам это.

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

Важно отметить, что если вы не укажете значение родительского элемента, в качестве родительского элемента будет использоваться значение браузера по умолчанию.

 p { 
 размер шрифта: 1,5 em; 
 } 
 

В этом примере для свойства font-size установлено значение 1,5em, что означает, что размер текста в элементе

будет в 1,5 раза больше размера шрифта браузера по умолчанию, если нет прямого родительский элемент.

Поскольку большинство браузеров масштабируют размер шрифта по умолчанию в соответствии с размером экрана, это позволяет создавать гибкие и адаптивные макеты, которые могут адаптироваться к разным размерам экрана и шрифта.

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

---

Встречайте безголовое решение на основе React для создания стильных CRUD

приложений. Благодаря уточнению вы можете быть уверены, что ваша кодовая база всегда будет оставаться чистой и свободной от шаблонов.

Попробуйте уточнить, чтобы быстро создать свой следующий проект CRUD , будь то панель администратора, информационная панель, внутренний инструмент или витрина.

---

Что такое CSS rem

Теперь, когда мы знаем, что такое em, давайте посмотрим на rem. rem — это еще одна единица измерения длины в CSS, которая расшифровывается как «root em». Поскольку мы знаем, что em равен размеру пункта текущего шрифта, мы можем сделать вывод, что «корневой em» относится к размеру шрифта корневого элемента, которым обычно является элемент .

Запутались? Разберём ещё.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент, на который смотрит rem, — это не div или раздел над ним, а самый первый элемент, который его окружает, то есть элемент html. Давайте сделаем пример, используя предыдущий код. Тот же HTML-код, только с дополнительным div.

  
  
  
  
  
  
  
  
  
 
 
 Я родительский div, установленный на 20px 
 
 
 Я дочерний div, установленный на 2em, т.е. 40px. 
  
 
 
 Я дочерний div, установленный на 2em, т.е. 60px. 
 
 
 
 
  
  
 

Далее мы добавим следующий код CSS в наш файл CSS.

 html{ 
 размер шрифта: 30px; 
 } 
 . child-2{ 
 размер шрифта: 2rem; 
 } 
 
 

Результат будет таким.

Как видите, несмотря на то, что элемент div child-2 находится внутри других элементов div, он полностью возвращается к элементу html, чтобы наследовать его размер шрифта.

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

Вот ссылка на codepen, если вы хотите немного поиграть с приведенным выше кодом.

Различия между единицами измерения em и rem​

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

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

Когда использовать единицы em и rem в CSS

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

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

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

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

Заключение​

Если вы добрались сюда, поздравляем! Теперь вы знаете все, что нужно знать об em и rem и зачем они нам нужны.