Как работает блочная модель в веб-дизайне?

Блочная модель в веб-дизайне отвечает за размеры и расстояния, управляет поведением элементов и формирует макет. frontendbase.ru Любой элемент в HTML становится прямоугольником: заголовки, изображения, кнопки, текст — всё это прямоугольные области, которые браузер размещает на экране. skillbox.ru

Блочная модель состоит из четырёх слоёв: skillbox.ru

1. Содержимое (content). skillbox.ru Это то, что видно внутри элемента: текст, изображение, кнопка. skillbox.ru Размер содержимого задают свойства width и height. frontendbase.ru Если их не указывать, браузер рассчитывает ширину и высоту автоматически, исходя из текста или изображения. frontendbase.ru
2. Внутренние отступы (padding). skillbox.ru frontendbase.ru Свойство padding отталкивает текст или картинку от рамки элемента. frontendbase.ru Отступы можно задать для каждой стороны отдельно: padding-top, padding-right, padding-bottom, padding-left. frontendbase.ru
3. Рамка (border). skillbox.ru frontendbase.ru Свойство border добавляет линию вокруг содержимого и внутренних отступов. frontendbase.ru Оно имеет три части: толщину, стиль и цвет. frontendbase.ru
4. Внешние отступы (margin). skillbox.ru frontendbase.ru Свойство margin отталкивает элемент от соседей. frontendbase.ru Это основной инструмент для управления расстояниями в вёрстке. frontendbase.ru

Когда разработчик задаёт ширину и высоту, браузер складывает все слои. frontendbase.ru Итоговый размер блока равен содержимому плюс padding, плюс border, плюс margin. frontendbase.ru

Понимание блочной модели — основа веб-вёрстки: без неё невозможно управлять расположением блоков и создавать аккуратный интерфейс. skillbox.ru