margin
Внешний отступ элемента — расстояние до соседей.
Синтаксис
margin: top right bottom left;Значения
| Параметр | Тип | Описание |
|---|---|---|
| length | length | Одно значение для всех четырёх сторон: `16px`. |
| auto | keyword | Забирает всё свободное место; `margin: 0 auto` ставит блок заданной ширины по центру. |
| two values | length | По вертикали и по горизонтали: `10px 20px`. |
| four values | length | По часовой стрелке от верхнего: `10px 20px 30px 40px`. |
Примеры
Разные способы записать отступы:
<style>
.box { background: lightskyblue; padding: 6px; }
</style>
<div class="box" style="margin: 16px;">16px on every side</div>
<div class="box" style="margin: 0 40px;">0 vertically, 40px horizontally</div>
<div class="box" style="margin-top: 24px;">Only the top margin</div>Блок по центру:
<div style="width: 200px; margin: 0 auto; background: gold; padding: 6px;">Centered with auto</div>Примечания
Вертикальные отступы соседних блоков схлопываются: из 20px и 30px остаётся 30px. Отступы могут быть отрицательными. Внутри flexbox и grid промежутки обычно проще задать через gap.
См. также
- padding — Внутренний отступ между содержимым и рамкой элемента.
- gap — Промежутки между элементами во flexbox и grid.
- margin-inline — Логические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
- box-sizing — Входят ли в `width` и `height` внутренние отступы и рамка.
Вопросы и ответы по теме
В учебнике
- Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.