Урок 02 · 11 хв

Коробка: margin, border, padding

Кожен елемент — прямокутник. Ширина «300px» без border-box бреше.

Зовні margin, потім border, усередині padding, потім контент. box-sizing: border-box рахує padding і border усередину ширини — так і пиши на *, інакше width: 100% + padding вилазить за батька.

Чесна ширина

Можна спитати про це правило«Вертикальні margin схлопуються»

display: none прибирає з потоку. visibility: hidden залишає діру.
overflow: auto — скрол, коли контент не влазить. Не ховай помилку верстки.
Картинка за замовчуванням inline: знизу щілина, як у тексту. Зроби display: block або flex-дитину.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. border-box рахує padding
2. Сусідні вертикальні margin
3. display: none vs visibility: hidden