Пошук уроків, статей та іншого контенту
Content, padding, border, margin — і чому box-sizing критично впливає на реальний розмір елемента.
Незалежно від візуального вигляду, кожен HTML-елемент CSS трактує як прямокутну «коробку», що складається послідовно з чотирьох шарів зсередини назовні: content (сам вміст), padding (внутрішній відступ між вмістом і рамкою), border (рамка), margin (зовнішній відступ до сусідніх елементів).
┌─────────────── margin ───────────────┐
│ ┌─────────── border ───────────────┐ │
│ │ ┌───────── padding ─────────────┐ │ │
│ │ │ content │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└────────────────────────────────────────┘.card {
width: 300px;
padding: 20px;
border: 2px solid #ccc;
}
/* Реальна видима ширина: 300 + 20*2 (padding) + 2*2 (border) = 344px, НЕ 300px */За замовчуванням (box-sizing: content-box) властивість width задає ширину лише шару content — padding і border додаються до неї, збільшуючи реальну видиму ширину елемента понад вказане значення width. Це найчастіше джерело несподіваних «розповзання» верстки за межі контейнера в новачків.
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px;
border: 2px solid #ccc;
}
/* Реальна видима ширина: рівно 300px — padding і border тепер ВХОДЯТЬ у width, не додаються */box-sizing: border-box змінює саме значення, яке представляє width, — тепер це загальна видима ширина, що вже включає padding і border; вміст (content) стискається, щоб усе разом дало точно вказану ширину. Це значно передбачуваніше для верстки, тому universal-селектор *, що вмикає border-box для геть усіх елементів, — практично стандартна перша сходинка стилів у сучасних проєктах.
Вертикальні margin двох сусідніх блокових елементів (margin-bottom першого і margin-top другого) не підсумовуються, а «схлопуються» — реальний відступ між ними дорівнює більшому з двох значень, а не їхній сумі. Горизонтальні margin такого схлопування не мають.
margin collapse часто плутає новачків, які очікують, що margin-bottom: 20px і margin-top: 20px наступного елемента разом дадуть 40px відступу — насправді буде 20px, більше з двох значень. Це навмисна, стандартна поведінка CSS, а не баг.
Забути box-sizing: border-box і дивуватись, чому елемент з width: 100% і padding виходить ширшим за батьківський контейнер, — типова причина горизонтального скролу, якого не мало бути.
Очікувати, що вертикальні margin сусідніх елементів підсумовуються, — margin collapse бере більше з двох значень, а не суму.
Плутати padding (усередині рамки елемента, впливає на фон) і margin (зовні рамки, прозорий, не залежить від фону елемента) за призначенням.
Кожен елемент — коробка з content/padding/border/margin. За замовчуванням (content-box) width стосується лише content, і padding/border додаються зверху, збільшуючи реальний розмір, — box-sizing: border-box (практично універсальний сучасний стандарт) робить width повною видимою шириною, включно з padding і border. Вертикальні margin сусідніх елементів схлопуються до більшого значення, а не підсумовуються.