Блочная модель и display
Content, padding, border, margin, box-sizing и типы display.
Обновлено
Что такое блочная модель
Для CSS каждый элемент — это коробка. У коробки 4 слоя, изнутри наружу:
margin — пространство снаружи коробки, прозрачное
border — рамка
padding — пространство между рамкой и содержимым, с фоном коробки
content — текст, изображение
box-sizing — самая важная строка CSS
По умолчанию (content-box) width применяется только к содержимому. Padding и border добавляются сверху:
.box { width: 200px; padding: 20px; border: 1px solid; }
/* content-box: реальная ширина = 200 + 20*2 + 1*2 = 242px 😬 */
/* border-box: реальная ширина = 200px, содержимое сжимается до 158px ✓ */Поэтому любой современный проект начинается с:
*, *::before, *::after { box-sizing: border-box; }Tailwind добавляет это автоматически (в preflight).
Типы display
Свойство display определяет поведение коробки:
| Значение | Поведение | Когда |
|---|---|---|
block |
с новой строки, на всю ширину, принимает width/height |
секции, абзацы |
inline |
внутри текста, игнорирует width, height и вертикальный margin |
ссылка, strong |
inline-block |
внутри текста, но принимает размеры | бейджи, кнопки по-старому |
flex |
дети вдоль одной оси | строки / колонки — Flexbox |
grid |
дети по строкам и колонкам | двумерная раскладка — Grid |
none |
элемент полностью исчезает (не занимает места) | скрытие |
display: none, visibility: hidden или opacity: 0: первое убирает элемент из раскладки; второе скрывает, но сохраняет место; третье делает его прозрачным, но он остаётся кликабельным.
Схлопывание margin
Вертикальные margin двух соседних блоков не складываются — берётся больший:
h2 { margin-bottom: 24px; }
p { margin-top: 16px; }
/* расстояние между ними = 24px, а не 40px */Во flex/grid этого не происходит. Современное решение: не ставьте margin детям, ставьте gap родителю.
Размеры
| Свойство | Роль |
|---|---|
width / height |
фиксированный размер |
min-width / max-width |
ограничения — max-width: 65ch для читаемого текста |
aspect-ratio: 16 / 9 |
пропорции без хаков с padding |
overflow: hidden / auto |
что делать с содержимым, которое не помещается |
Правило: избегайте фиксированной height у контейнеров с текстом — содержимое бывает разным, и текст вылезет из коробки.
Коротко
- Коробка = content + padding + border + margin.
box-sizing: border-boxвезде.displayопределяет поведение; flex и grid — для раскладки.- Расстояние между элементами →
gapу родителя.