← Все вопросы

Чем отличаются px, em, rem и % в CSS?

Задан 7 месяцев назад861 просмотров3 ответа
16

Задаю размеры шрифта и отступы то в px, то в rem, то в процентах — и не понимаю, когда что использовать. Объясните разницу между px, em, rem и %.

3 ответа

33
✓ Принятый ответ — помог автору

Разница в том, ОТНОСИТЕЛЬНО ЧЕГО считается размер:

  • px — абсолютные пиксели, фиксировано. 16px всегда 16px.
  • em — относительно размера шрифта ТЕКУЩЕГО элемента (а для самого font-size — родителя). Опасно вложенностью: em'ы перемножаются.
  • rem — относительно размера шрифта КОРНЯ (<html>, обычно 16px). 1rem = 16px по умолчанию, не зависит от вложенности — поэтому это сейчас выбор по умолчанию для шрифтов и отступов.
  • % — относительно соответствующего размера родителя (для width — ширины родителя).

Практика: шрифты и отступы — rem, ширины адаптивных блоков — % или vw, бордеры/мелочи — px.

Сергей Ерошевич наконец-то понял почему em'ы «плывут» при вложенности · 7 месяцев назад
12

rem считается от корневого html, em — от родителя, px — фиксированный, % — от родителя. Бери rem и не мучайся.

4

Для шрифтов — rem.

Ваш ответ

Войдите, чтобы ответить на вопрос.
Поддержать проект