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