Длина

В спецификации у каждого свойства описано, какие типы значений оно принимает, и тип <length> встречается чаще других: без него не обходится ни width, ни margin, ни font-size. Длина всегда записывается числом и единицей без пробела: 12px, а не 12 px.

Правила записи

• Единица обязательна. margin: 10 — ошибка, и браузер отбросит всю декларацию. Исключение — ноль: margin: 0 допустим.
• Число может быть дробным и отрицательным: -0.5rem. Но отрицательную длину принимает не каждое свойство: margin — да, padding и width — нет.
• Проценты — отдельный тип. Многие свойства принимают «длину или процент», но процент всегда считается от чего-то другого, и у разных свойств — от разного.
• Число без единицы — тоже отдельный тип. У line-height: 1.5 это множитель, а не длина, и наследуется он иначе, чем 1.5em.

Абсолютные и относительные

Абсолютные длины привязаны к фиксированной мере: px, а также печатные cm, mm, in, pt. Они жёстко связаны между собой: дюйм равен 96 CSS-пикселям, пункт — 1/72 дюйма. На экране такой «сантиметр» не совпадает с сантиметром линейки, поэтому печатные единицы уместны в стилях для печати.

Относительные зависят от контекста: от размера шрифта (em, rem, ch), от окна (vw, vh), от контейнера (cqi). Как выбирать между ними — в статье «Единица измерения».

Вычисления с длинами

.sidebar {
  width: calc(100% - 2 * var(--gap));
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  padding: max(1rem, 3vw);
}

Функции calc(), min(), max() и clamp() складывают и сравнивают длины в разных единицах, и браузер считает итог для каждого экрана сам. Вокруг + и - внутри calc() пробелы обязательны: calc(100%-2rem) не сработает. Итоговые размеры браузер показывает в пикселях на вкладке вычисленных стилей инструментов разработчика.