1. HTML и CSS
  2. Разница между «px», «em» и «rem»

Разница между «px», «em» и «rem»

px

Пиксель задаёт точный размер элемента и размер шрифта.

Отображаемое количество пикселей на экране задаётся в настройках монитора. Т.е. если у монитора будет задан размер «1280x720», то элемент с шириной в «1280px» будет на всю ширину экрана.

em

Единица измерения «em» задаёт размер текста в зависимости от его текущего размера. Например, размер «2em» означает, что текущий текст надо сделать в два раза больше.

<p>Обычный текст. <span style="font-size: 2em">Текст в em</span>.</p>

Код выше покажет следующий текст.

Обычный текст. Текст в em.

Размер зависит от текущего размера шрифта. Т.е. вложенная «2em» снова увеличит текст в два раза.

<p>
  Обычный текст.
  <span style="font-size: 1.5em">
    Текст в <span style="font-size: 1.5em">em</span>
  </span>
</p>

Результат.

Обычный текст.   Текст в em

rem

Единица измерения «rem» изменяется в зависимости от размера текста, заданного в теге <html> или :root.

:root {
  font-size: 16px;
}

По коду выше, «1rem» будет равнятся «14px», а «2rem» будет равняться «28px».

<p>
  <span style="font-size: 2rem">
    Текст в <span style="font-size: 2rem">em</span>
  </span>
</p>

В коде выше «2rem» будет равняться «28px». Вложенный элемент с «2rem» также будет равняться «28px», т.к. размер «rem» зависит не от текущего текста, а от размера, заданного в <html>.