Что такое блочная модель в CSS?

Блочная модель CSS описывает, как элементы отображаются на странице как прямоугольные блоки. Она состоит из четырех зон, или слоев, которые накладываются друг на друга, начиная с содержимого:

1. Content (Содержимое): Область, где располагается реальное содержимое элемента (текст, изображения и т.п.). Его размер определяется свойствами width и height.

2. Padding (Внутренний отступ): Прозрачная область между содержимым и границей элемента. Задается свойствами padding-top, padding-right, padding-bottom, padding-left или сокращенным padding.

3. Border (Граница): Линия, окружающая Padding и Content. Ее стиль, толщина и цвет задаются свойствами border-width, border-style, border-color или сокращениями, например border.

4. 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.

Пример:

div {
  width: 100px; /* Ширина Content (для content-box) или всего элемента (для border-box) */
  height: 50px; /* Высота Content (для content-box) или всего элемента (для border-box) */
  padding: 10px; /* Внутренний отступ */
  border: 2px solid black; /* Граница */
  margin: 15px; /* Внешний отступ */
}

В зависимости от значения 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 добавляется вокруг этого общего размера.