Визуализатор бокс-моделей CSS

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

1. Введите значения box model: определите поле, границу, padding и размеры контента в полях или интерактивных ползунках.
2. Изучайте визуализацию: классическая диаграмма вложенных блоков обновляется в реальном времени — поле (оранжевый), граница (жёлтый), padding (зелёный) и контент (синий), все чётко обозначены.
3. Скопируйте CSS: нажмите «Копировать CSS», чтобы получить полные свойства box model настроенного элемента.

Зачем использовать визуализатор CSS box model?

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

Возможности

• Интерактивная диаграмма: классический вид вложенного box model с цветными слоями (поле, граница, padding, контент).
• Переключатель box-sizing: переключайтесь между content-box и border-box, чтобы увидеть, как каждый режим влияет на общие размеры.
• Индивидуальные стороны: определяйте значения сверху/справа/снизу/слева независимо для поля, padding и границы.
• Расчёт общего размера: отображает общую вычисленную ширину и высоту элемента.
• Вывод CSS: генерирует готовый к использованию CSS для настроенного box model.

Часто задаваемые вопросы

В чём разница между content-box и border-box?

С content-box (по умолчанию) width и height применяются только к области контента — padding и граница добавляются к общему размеру элемента. С border-box width и height включают padding и границу, делая размеры более предсказуемыми. Большинство современных CSS-резетов применяют box-sizing: border-box ко всем элементам.

Что такое схлопывание полей?

Когда два вертикальных поля соприкасаются (между смежными блочными элементами или между родителем и первым/последним ребёнком), они схлопываются в одно поле, равное наибольшему из двух значений. Это не происходит с детьми flex или grid, ни с элементами, имеющими padding или границы.

Как удалить дополнительное пространство под inline-элементами?

У inline-элементов (например, <img>) есть небольшое пространство под ними, вызванное выравниванием базовой линии line-height. Исправьте это, поставив display: block на элемент, или vertical-align: bottom, или font-size: 0 на родителя.