Единицы размеров в 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

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

Переполнение текста (text-overflow)

Сентябрь 3, 2021 г.

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

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-68b09d6db6cb9606639948/] Ключевым является значение auto для левого и правого отступов. ...

Читать

box-sizing: padding-box на Chrome

Сентябрь 19, 2015 г.

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-68b09d6db6e7a616513753/] Во ...

Читать
 

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

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



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