📦 Box Model Visualizer

Интерактивная визуализация CSS Box Model

👁️ Визуализация
Content
Margin
Border
Padding
Content
💻 CSS Code
💡 О Box Model
Каждый HTML элемент — это прямоугольная коробка, состоящая из 4 слоёв:
  • Content — содержимое элемента (текст, изображения)
  • Padding — внутренний отступ (между content и border)
  • Border — рамка вокруг padding
  • Margin — внешний отступ (между элементами)
📐 Box Sizing
  • content-box — width/height задают размер content (padding и border добавляются сверху)
  • border-box — width/height включают padding и border (рекомендуется)
🎛️ Настройки
Box Sizing:
Content (ширина × высота):
×
Padding:
Border (толщина):
Margin: