Единица измерения

Одно и то же число значит разное в зависимости от того, что стоит после него: 2px, 2rem, 2vw и 2s — четыре совершенно разные величины. Единица определяет и тип значения, и то, от чего оно отсчитывается. Чаще всего говорят о единицах длины, но в CSS есть и другие группы.

Не только длина

• Углы: deg, rad, grad, turn — для поворотов и направления градиента. rotate(0.25turn) равен rotate(90deg).
• Время: s и ms — длительность и задержка переходов и анимаций.
• Разрешение: dppx, dpi, dpcm — в медиазапросах для экранов высокой плотности; x — синоним dppx.
• Доля свободного места: fr в CSS Grid. Это не длина: её нельзя подставить в calc() или в width.
• Проценты: % — всегда доля от какой-то базы, своей у каждого свойства.

Что выбрать для типовых задач

body    { font-size: 1rem; }                      /* шрифт */
.btn    { padding: 0.5em 1em; }                   /* внутри компонента */
.text   { max-width: 70ch; }                      /* ширина строки */
.grid   { grid-template-columns: 1fr 3fr; }       /* доли сетки */
.hero   { min-height: 100svh; }                   /* размер экрана */
.line   { border-top: 1px solid; }                /* тонкие линии */

Общий принцип: размер шрифта и отступы — в rem, чтобы уважать настройки пользователя; размеры внутри компонента — в em; ширина колонки текста — в ch, тогда в строку помещается предсказуемое число символов; линии и тени — в пикселях, где масштабирование не нужно. Проценты и fr — для раскладки, единицы экрана — для первых экранов и плавной типографики.

Ошибки записи

Пробел между числом и единицей (16 px) или пропущенная единица (width: 300) делают декларацию недействительной, и браузер молча её пропускает. Внутри calc() нельзя смешивать несовместимые типы: calc(1s + 10px) не имеет смысла. Ноль без единицы допустим для длины, а для времени и углов единицу надёжнее указывать всегда: 0s, 0deg.