Урок 14 из 53 · 7 мин

box-sizing и схлопывание отступов

Почему карточка шире, чем задано, и куда пропадают вертикальные отступы.

Лишние пиксели

Задал ширину 240px, а карточка 274px!
Бро
По умолчанию ширина — только содержимое. Отступы и рамка прибавляются сверху. Скажи border-box — буду считать всё вместе.

Свойство

box-sizing

Что это: content-box (по умолчанию) — без отступов и рамки; border-box — вместе с ними.
Зачем: С border-box ширина из макета совпадает с реальной.
Как: HTML
<style> .a { width: 150px; padding: 20px; border: 2px solid #c8763a; } .b { box-sizing: border-box; width: 150px; padding: 20px; border: 2px solid #6b3e26; } </style> <div class="a">content-box</div><div class="b">border-box</div>
Так это выглядит

Понятие

Схлопывание отступов

Что это: Верхний и нижний margin соседних блоков не складываются, побеждает больший.
Зачем: Между абзацами 16px и 24px будет 24px, а не 40px.
Как: HTML
<style> p { margin: 16px 0; background: #fdf6ec; } .big { margin-top: 24px; } </style> <p>Первый</p><p class="big">Между нами 24px, а не 40</p>
Так это выглядит

Ника
В начале любого проекта: *, *::before, *::after { box-sizing: border-box; }.

Ваш ход

Задание

Сделай всем элементам box-sizing: border-box через универсальный селектор *.

<style>
.card { width: 240px; padding: 16px; border: 1px solid #c8763a; }
</style>
<div class="card">Пенал</div>

<style>
.card { width: 240px; padding: 16px; border: 1px solid #c8763a; }
</style>
<div class="card">Пенал</div>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

При box-sizing: content-box элемент с width: 200px; padding: 10px; border: 1px имеет ширину:

Домашнее заданиеДля закрепления

Выберите один ответ.

Блоки идут друг под другом: у первого margin-bottom: 20px, у второго margin-top: 30px. Расстояние между ними: