Box Sizing

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

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

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

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

selector {
    box-sizing: value;
}

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

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

border-box: Свойства width и height включают размеры content, padding и border. Отступы по-прежнему добавляются за пределами элемента.

Например:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

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

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

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

Задание

Легко

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

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

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

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