Визуализатор модели коробки

Каждый HTML-элемент отображается как прямоугольный блок. Блочная модель CSS описывает, как слои содержимого, padding, border и margin элемента складываются вместе, определяя общее пространство, занимаемое элементом на странице. Понимание этой модели необходимо для управления макетом и отступами.

Настройте числовые параметры для каждого слоя — margin, border, padding и размеры содержимого. Нажмите на секцию слоя, чтобы выделить его на диаграмме. Визуальный предпросмотр обновляется мгновенно, а соответствующий CSS-код генерируется внизу для копирования.

Margin — это прозрачное пространство за пределами border, отделяющее элемент от соседей. Border — это видимая граница вокруг padding. Padding — это пространство между border и фактическим содержимым. Content — это самая внутренняя область, где отображается текст и дочерние элементы.

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

Используйте этот визуализатор для экспериментов с различными значениями и наблюдения за тем, как каждый слой влияет на общий размер элемента. Если элемент занимает больше места, чем ожидалось, проверьте, не превышают ли значения padding или border целевую ширину. Сгенерированный CSS можно вставить непосредственно в ваш проект.