Блокова модель та display
margin, padding, border і як вони впливають на розмір елемента
Box Model — кожен елемент це коробка
Кожен HTML елемент — це прямокутна коробка з чотирма шарами: 1. **Content** — вміст (текст, зображення) 2. **Padding** — внутрішній відступ між вмістом і рамкою 3. **Border** — рамка навколо padding 4. **Margin** — зовнішній відступ від інших елементів Як подарунок: текст на листівці (content) → пінопласт (padding) → коробка (border) → порожнеча до наступного предмету (margin).
Скорочення через пробіл: одне значення = всі боки, два = верх/низ і право/ліво, чотири = зверху за годинниковою стрілкою.
box-sizing: border-box — найважливіше правило
Проблема без border-box:
.box { width: 300px; padding: 20px; border: 2px solid; }
/* Реальна ширина = 300 + 20*2 + 2*2 = 344px — несподівано! */Рішення — border-box:
* { box-sizing: border-box; }
.box { width: 300px; padding: 20px; border: 2px solid; }
/* Реальна ширина = 300px — padding і border всередині */З border-box ширина яку задаєш — це ширина яку отримуєш. Додавай це правило завжди!
display — тип блоку
block— займає всю ширину рядка, є повноцінним блоком (div,p,h1)inline— займає тільки ширину вмісту, не має width/height (span,a,strong)inline-block— як inline, але можна задати width/heightnone— ховає елемент повністю
Margin collapse (злиття відступів): коли два блочних елементи стоять вертикально — їх верхній і нижній margin зливаються в один (більший). Наприклад, margin-bottom: 20px у p і margin-top: 30px у наступному p дасть 30px відступ, а не 50px. Вирішення: використовуй margin тільки знизу або тільки зверху.
max-width: 1200px + margin: 0 auto — стандартний паттерн для центрованого контейнера.