Box Sizing

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 39 из 76.

В 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 включают в себя размеры контента, внутренних отступов (padding) и границ (border). Внешние отступы (margins) по-прежнему добавляются снаружи элемента.

Например:

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

Задание

Легко

Вам дан HTML-документ с двумя блоками (<div>), каждый из которых имеет свой класс. Ваша задача — использовать свойство box-sizing, чтобы управлять тем, как рассчитываются ширина и высота этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом <strong>content-box-div</strong>. Установите width равным 300px, height — 200px, padding — 20px, border — 5px solid blue и box-sizing — content-box.
Напишите CSS-правило для элемента <div> с классом <strong>border-box-div</strong>. Установите width равным 300px, height — 200px, padding — 20px, border — 5px solid red и box-sizing — border-box.

Шпаргалка

Свойство box-sizing определяет, как рассчитывается общая ширина и высота элемента:

selector {
    box-sizing: value;
}

Значения:

content-box (по умолчанию): Ширина и высота включают только размер контента. Внутренние отступы (padding) и границы (border) добавляются снаружи.
border-box: Ширина и высота включают контент, внутренние отступы и границы. Внешние отступы (margin) по-прежнему добавляются снаружи.

/* пример content-box */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Общая ширина: 300px + 40px + 10px = 350px */
}

/* пример border-box */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Общая ширина: 400px (контент сжимается, чтобы поместиться) */
}

Попробуйте сами

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>