Блочная модель CSS - это способ, с помощью которого браузеры определяют размеры и расположение элементов на веб-странице. Каждый элемент веб-страницы представляется как прямоугольник, который может быть определен с помощью четырех свойств: width (ширина), height (высота), padding (внутренний отступ) и border (граница).
Ширина (width) и высота (height) определяют размеры содержимого элемента, тогда как внутренний отступ (padding) и граница (border) могут изменять размеры элемента, но не влияют на размеры содержимого.
Каждый элемент может содержать несколько уровней вложенности, каждый из которых также имеет свои размеры и расположение в соответствии с его родительским элементом.
Пример CSS-кода, демонстрирующего блочную модель:
div {
width: 300px; /* устанавливаем ширину блока */
height: 200px; /* устанавливаем высоту блока */
padding: 20px; /* устанавливаем внутренний отступ */
border: 1px solid black; /* устанавливаем границу */
}В данном примере мы определяем блок div с шириной 300 пикселей, высотой 200 пикселей, внутренним отступом 20 пикселей и границей толщиной 1 пиксель и цветом черный. Этот блок будет иметь всего лишь 300 пикселей ширины и 200 пикселей высоты, но при этом его фактический размер будет больше из-за внутреннего отступа и границы.