Размеры блока

В CSS свойство box-sizing определяет, как рассчитываются общая ширина и высота элемента. По умолчанию свойства width и height учитывают только размер содержимого и не включают отступы, границы или внешние поля. Однако с помощью свойства box-sizing можно изменить это поведение и сделать так, чтобы свойства width и height также учитывали размеры отступов и границ.

Это может упростить расчёты макета и предотвратить неожиданные проблемы с размерами.

Вот базовый синтаксис использования свойства box-sizing:

selector {
    box-sizing: value;
}

value: Желаемое поведение box-sizing, которое может быть одним из следующих:

• content-box: Это значение по умолчанию. Свойства width и height учитывают только размер содержимого. Внутренние отступы, границы и внешние отступы добавляются за пределами заданных ширины и высоты.

• border-box: Свойства width и height включают размеры содержимого, внутренних отступов и границы. Внешние отступы по-прежнему добавляются за пределами элемента.

Например:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Поведение по умолчанию */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

В этом примере для элемента <div> задано значение box-sizing content-box. Это означает, что фактическая отображаемая ширина элемента <div> будет равна 300px (содержимое) + 40px (отступы слева и справа) + 10px (границы слева и справа) = 350px. Высота будет рассчитана аналогичным образом.

С другой стороны, для элемента с классом container значение box-sizing равно border-box. В этом случае заданная width 400px включает содержимое, внутренние отступы и границу. Фактическая область содержимого уменьшится, чтобы учесть внутренние отступы и границу, в результате ширина содержимого составит 400px - 60px (внутренние отступы слева и справа) - 20px (граница слева и справа) = 320px. Высота будет рассчитана аналогичным образом.