Какие существуют единицы измерения в CSS?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

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

Тип	Единица	Описание
Абсолютные	`px`	Пиксели, зависят от разрешения экрана.
	`pt`	Пункты, 1/72 дюйма.
	`cm`	Сантиметры.
	`mm`	Миллиметры.
	`in`	Дюймы, 1 дюйм = 2.54 см.
	`pc`	Пика, 1 пика = 12 пунктов.
Относительные	`em`	Относительно размера шрифта родительского элемента.
	`rem`	Относительно размера шрифта корневого элемента (`html`).
	`vw`	Относительно 1% ширины вьюпорта.
	`vh`	Относительно 1% высоты вьюпорта.
	`vmin`	Относительно 1% наименьшей стороны вьюпорта (ширина или высота).
	`vmax`	Относительно 1% наибольшей стороны вьюпорта (ширина или высота).
	`%`	Относительно размера родительского элемента (или содержащего блока).
	`ch`	Относительно ширины символа '0' текущего шрифта.
	`ex`	Относительно высоты строчных букв (x-height) текущего шрифта.

Выбор единицы зависит от контекста: px часто используется для границ и растровых изображений, rem и em – для шрифтов и отступов, обеспечивая лучшую масштабируемость на разных устройствах. Процентные значения полезны для отзывчивых макетов.

/* Пример использования */
.container {
  width: 80%; /* Относительно родителя */
  margin: 1rem auto; /* Относительно размера шрифта html */
}

.box {
  padding: 20px; /* Абсолютное значение */
  font-size: 1.2em; /* Относительно размера шрифта родителя */
  width: 50vw; /* Относительно ширины вьюпорта */
}