Блочная модель: margin и padding

Как устроены содержимое, внутренний отступ, граница и внешний отступ элемента.

также в веб-дизайне и основах веб-разработки

Браузер размещает каждый элемент как прямоугольную коробку. Снаружи внутрь идут margin, border, padding и content - содержимое.

Выберите элемент

Схема и значения обновятся вместе с примером.

Блок с текстом, внутренним отступом и рамкой.

Элемент на странице

Курс по веб-дизайнуНачать обучение

Модель как в DevTools

margin

1612 сверху, 12 снизу16

border

11 сверху, 1 снизу1

padding

1612 сверху, 12 снизу16

Содержимое176 × 56 px

Размер до margin: 210 × 82 px

Что включает width?

Внешние отступы в размеры элемента не входят. При переключении режима меняется ширина содержимого, а margin остаётся снаружи.

.card-example {
  box-sizing: content-box;
  width: 176px;
  height: 56px;
  padding: 12px 16px 12px 16px;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #2563eb;
  margin: 12px 16px 12px 16px;
}

marginborderpaddingcontent

Слева показан настоящий элемент страницы, справа - его схема, похожая на блок Box model в Chrome DevTools. Выберите карточку, кнопку или изображение, чтобы сравнить коробки. Толщина цветных зон на схеме увеличена для наглядности; числа показывают значения CSS.

Зона	Что означает	Видна ли окраска фона элемента
`content`	Текст, изображение или другое содержимое	Да
`padding`	Внутреннее пространство от содержимого до границы	Да
`border`	Граница вокруг содержимого и `padding`	Нет, это сама граница
`margin`	Внешнее пространство между границей элемента и соседними элементами	Нет

Цвета зон подобраны по схеме DevTools: оранжевый margin, жёлтый border, зелёный padding, синий content. Цвет помогает найти область, а подписи и значения показывают, что именно браузер измеряет.

Как считается ширина

Переключите content-box и border-box в примере выше. Меняется то, что браузер считает заданной шириной:

При box-sizing: content-box свойство width задаёт только содержимое. К нему прибавляются padding и border с обеих сторон.
При box-sizing: border-box свойство width уже включает содержимое, padding и border.
margin находится снаружи в обоих режимах и в width не входит.

Когда у padding, margin или border-width записаны четыре значения, они идут по кругу: верх, право, низ, лево. Например, padding: 12px 16px 12px 16px задаёт по 12px сверху и снизу и по 16px справа и слева. В схеме эти стороны подписаны отдельно.

Одного border-width недостаточно, чтобы увидеть границу: начальное значение border-style - none. В примере выше добавлены border-style: solid и border-color, поэтому линия действительно рисуется.

Например, при ширине содержимого 240px, отступе 16px слева и справа и границе 2px общая ширина от края до края рамки в режиме content-box равна 240 + 16 + 16 + 2 + 2 = 276px. В режиме border-box ширина от края до края рамки останется 240px, а содержимое станет уже.

Поэтому во многих проектах в начале таблицы стилей задают:

styles.css

* {
  box-sizing: border-box;
}

Это помогает удерживать заданные размеры карточек и колонок. Само содержимое всё равно может не поместиться, если задать ему слишком маленькую ширину или высоту.

Внешние отступы

margin задаёт расстояние снаружи границы. Между соседними блочными элементами вертикальные отступы иногда схлопываются: вместо суммы браузер оставляет больший из двух. Это отдельное правило CSS. Для начала запомните главное: margin не окрашивается фоном элемента и не входит в его ширину по box-sizing.

Больше примеров цветов и оформления карточки - в статье «Правила и селекторы CSS». Для официального справочника: блочная модель на MDN и box-sizing.