Свойство margin: внешние отступы
Как отделять соседние блоки и почему вертикальные margin иногда схлопываются.
Как это работает
margin создаёт пространство снаружи рамки элемента. Он отделяет блок от соседей, но не окрашивается фоном самого элемента. Сокращение принимает от одного до четырёх значений по схеме верх, право, низ, лево.
В обычной блочной раскладке вертикальные отступы некоторых соседних блоков могут схлопываться: результат не обязательно равен их сумме. Во Flexbox и Grid между элементами такого схлопывания нет. Для равномерного расстояния в рядах часто проще использовать gap.
Пример в интерфейсе
.box { max-width: 340px; margin: 24px auto; padding: 18px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| margin: 16px | Одинаковый отступ со всех сторон. |
| margin: 12px 24px | Вертикаль 12px, горизонталь 24px. |
| margin-inline: auto | Центрирование блока с ограниченной шириной. |
| Отрицательное значение | Допускается, но требует проверки пересечений. |
На что обратить внимание
Не пытайтесь исправить все расстояния отрицательными margin. Это часто маскирует неверную структуру раскладки и ломается на другом размере текста.
Проверьте на практике
Задайте двум абзацам margin-block: 20px и измерьте промежуток. Затем поместите их во flex-контейнер и сравните результат.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.