Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

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

EM — размер относительно размера шрифта родителя

2em внутри .child означает: в 2 раза больше font-size родителя. Внутри вложенных элементов em будет мультиплицироваться (компаундиться).

REM — размер относительно font-size корневого html

rem = root em. Не зависит от вложенности, только от html { font-size }.

Возникает закономерный вопрос — а можно ли использовать rem для самого контейнера html? Ответ — да.

И вот в чём нюанс: Когда вы задаёте rem для html {}, он обращаешься к самому себе. Поэтому rem в html {} будет зависеть от значения по умолчанию, заданного браузером (обычно 16px), если явно не переопределено раньше.

Другие единицы:

  • px — абсолютный пиксель (жёстко фиксирован, не масштабируется).
  • % — зависит от контекста (например, ширины родителя).
  • vw, vh — проценты от ширины/высоты окна браузера.
  • ch, ex — зависят от шрифта (ширина символа 0, высота x).

Когда использовать

Хочешь…Используй
Масштабируемый дизайн на всей страницеrem
Локальные размеры относительно font-size блокаem
Точный контроль, не зависящий от масштабаpx (осторожно)
Относительно размеров окнаvw / vh

Мало букафф? Читайте есчо !

CSS media query - ошибка в округлениях

Март 26, 2025 г.

Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов. К примеру, следующее правило может не срабатывать при значении 767 пикс: [crayon-6892532505668621783623/] Источниками проблем являются фича масштабирования и ...

Читать

Верстка: большой блок слева и четыре малых справа

Март 15, 2025 г.

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, ...

Читать

Zoom-эффект на CSS3

Октябрь 21, 2015 г.

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

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать
 

Комментарии к «Единицы размеров в CSS, отличия между REM, EM, PX и т.п.»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: