CSS Бесплатно, без регистрации

Визуализатор блочной модели CSS

Меняйте width, height, padding, border и margin — на схеме видны все слои блока, а расчёт ниже показывает, какой ширины элемент получится на самом деле. Готовый CSS появляется под превью.

Результат

Готовый CSS-код

.box {
  box-sizing: content-box;
  width: 200px;
  height: 120px;
  padding: 20px;
  border: 5px solid;
  margin: 20px;
}

Как пользоваться

Задайте width и height, затем переключайте box-sizing между content-box и border-box — смотрите, как меняется итоговый размер.
Настройте padding, border и margin. Снимите галочку «Все стороны вместе», чтобы задать верх, право, низ и лево отдельно.
Читайте расчёт под схемой: он показывает, из чего складываются итоговые ширина и высота.
Нажмите «Копировать» и вставьте правило .box в свой CSS-файл.

Как это работает

Четыре слоя любого блока

Каждый элемент — прямоугольник из четырёх слоёв, изнутри наружу: content (текст и вложенные элементы), padding (внутренний отступ между содержимым и рамкой), border (рамка) и margin (прозрачный внешний отступ до соседних элементов). Фон закрашивает content, padding и border, но не заходит под margin.

content-box и border-box

По умолчанию действует box-sizing: content-box: width и height задают только содержимое, а padding и border прибавляются сверху. Поэтому width: 200px при padding: 20px и border: 5px даёт блок шириной 250px. При box-sizing: border-box та же width уже включает padding и border, а сжимается содержимое. Поэтому большинство проектов начинают с такого сброса:

*, *::before, *::after {
  box-sizing: border-box;
}

Сокращённая запись: 1, 2, 3 или 4 значения

padding, margin и border-width принимают до четырёх значений по часовой стрелке: сверху, справа, снизу, слева. Одно значение — все стороны, два — вертикаль и горизонталь, три — верх, горизонталь и низ. Генератор пишет самую короткую форму из 1, 2 или 4 значений.

margin: 10px 20px 30px 40px; /* верх право низ лево */
margin: 10px 20px; /* вертикаль горизонталь */

Схлопывание margin

Вертикальные отступы соседних блоков схлопываются: если у одного блока margin-bottom: 30px, а у следующего margin-top: 20px, расстояние будет 30px (большее), а не 50px. Отступ родителя может слиться с отступом первого или последнего потомка, если их ничто не разделяет (нет padding, border или содержимого). Горизонтальные отступы не схлопываются, как и отступы flex- и grid-элементов.

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* расстояние между .a и .b = 30px */

Частые вопросы

Чем отличаются content-box и border-box?

В content-box width — это ширина только содержимого, поэтому padding и border делают элемент шире. В border-box width — ширина всего блока до границы рамки, так что размер элемента не меняется, сколько бы padding вы ни добавили.

Почему элемент шире, чем заданный width?

Скорее всего, box-sizing равен content-box, и padding с border прибавляются к ширине. Блок с width: 100% и padding: 20px тогда выходит за родителя на 40px. Задайте box-sizing: border-box — и проблема исчезнет.

Складываются ли отступы margin?

Не всегда. Вертикальные отступы соседних блоков схлопываются до большего, а горизонтальные и отступы flex- и grid-элементов складываются. Схема показывает margin-box одного элемента, поэтому схлопывание на ней не отображается.

Что выбрать: padding или margin?

padding — для пространства внутри элемента: он остаётся под фоном и входит в кликабельную область. margin — для расстояния между элементами: он всегда прозрачный. Проценты у обоих считаются от ширины родительского блока.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты