Загрузка...
Загрузка...
В CSS для задания размеров (отступов, шрифтов, ширины и т.д.) используются различные единицы измерения. Среди них особенно важны: px, em, rem. Они влияют на адаптивность, масштабируемость и наследование стилей.
font-size: 16px;
padding: 10px 20px;
/* родитель */
.parent {
font-size: 16px;
}
/* потомок */
.child {
font-size: 1.5em; /* 24px относительно родителя */
}
Вложенность em может накапливаться:
.outer {
font-size: 16px;
}
.inner {
font-size: 1.2em; /* 16px × 1.2 = 19.2px */
}
.inner .text {
font-size: 1.2em; /* 19.2px × 1.2 = ~23px */
}
<html> (по умолчанию 16px).html {
font-size: 16px;
}
.button {
font-size: 1.25rem; /* 20px */
padding: 0.5rem 1rem; /* 8px 16px */
}
| Единица | Относительно чего? | Поддержка масштабирования | Применение |
|---|---|---|---|
px | Абсолютный пиксель | ❌ | Жестко фиксированные размеры |
em | Родительский font-size | ✅ (но может накапливаться) | Внутренние отступы, margin |
rem | html font-size | ✅ | Размеры текста, layout, всё |
px — когда нужно зафиксировать размер независимо от контекста (например, иконка 1px).em — для внутренней масштабируемости компонентов (например, padding, margin).rem — для глобальной типографики, отступов, адаптивного дизайна.Совет:
Используйте rem для базовых размеров, em — для внутренних пропорций компонентов, и px — только в крайних случаях.