Блочная модель CSS описывает, как элементы отображаются на странице как прямоугольные блоки. Она состоит из четырех зон, или слоев, которые накладываются друг на друга, начиная с содержимого:
Content (Содержимое): Область, где располагается реальное содержимое элемента (текст, изображения и т.п.). Его размер определяется свойствами width и height.
Padding (Внутренний отступ): Прозрачная область между содержимым и границей элемента. Задается свойствами padding-top, padding-right, padding-bottom, padding-left или сокращенным padding.
Border (Граница): Линия, окружающая Padding и Content. Ее стиль, толщина и цвет задаются свойствами border-width, border-style, border-color или сокращениями, например border.
Margin (Внешний отступ): Прозрачная область вокруг границы элемента, отделяющая его от других элементов. Задается свойствами margin-top, margin-right, margin-bottom, margin-left или сокращенным margin. Маржины соседних блоков могут схлопываться.
Стандартное поведение, описываемое box-sizing: content-box (по умолчанию), определяет, что свойства width и height относятся только к блоку содержимого (Content). Padding и Border добавляются к этому размеру, увеличивая общий размер элемента.
При использовании box-sizing: border-box, свойства width и height включают в себя Content, Padding и Border. Margin всегда добавляется к общему размеру элемента, независимо от box-sizing.
Пример:
cssВ зависимости от значения box-sizing, реальные размеры элемента будут разными.
box-sizing: content-box: Реальная ширина = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Border-left) + 2px (Border-right) = 124px. Реальная высота = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Border-top) + 2px (Border-bottom) = 74px.box-sizing: border-box: Реальная ширина = 100px (Content + Padding + Border). Реальная высота = 50px (Content + Padding + Border).Внешний отступ margin: 15px добавляется вокруг этого общего размера.