Что такое боксовая модель в CSS? Данную модель ещё называют блочной и она буквально означает прямоугольник, состоящий из некоторых элементов. Это и есть структура страницы, которая окружает html элемент, а именно контент. Элементы margin, border, padding – создают своеобразную рамку, у каждого элемента есть свои свойства, которые выражаются в коде CSS.
Любой элемент на странице находится в блоке, то есть его окружают рамки CSS кода, которые определяют его ширину, высоту, поля вокруг контента, пространство от содержимого до внутреннего края рамок, сами, рамки и пространство от внешнего края границ. Соответственно свойство width — ширина, height — высота, пробел до внутреннего края рамки — padding, сами границы или рамки — это border, и пространство от внешнего края рамки — это margin. Margin включает в себя border и padding, очищая пространство вокруг границы элемента. Border — является самой границей, а padding — очищает пространство вокруг содержимого данной боксовой модели.