kostyl.dev
HTML & CSS

Блокова модель CSS. Відступи. Box Sizing

Глибоке занурення у блокову модель CSS: content, padding, border, margin, box-sizing, margin collapse, display-типи (block, inline, inline-block), overflow та visibility.

Блокова модель CSS. Відступи. Box Sizing

Чому елемент шириною 200px займає 240px?

Уявіть, що ви верстаєте макет: дизайнер каже, що картка має бути 200 пікселів завширшки. Ви пишете width: 200px, додаєте трохи внутрішніх відступів (padding: 20px) — і раптом картка стає 240px. Дві такі картки поруч вже не вміщуються в контейнер. Знайомо?

Ця «загадка» — не баг браузера, а фундаментальна концепція CSS, яку називають блоковою моделлю (Box Model). Кожен HTML-елемент на сторінці — це «коробка» (box) з кількома шарами. І поки ви не зрозумієте, як ці шари взаємодіють, верстка буде повна сюрпризів.

У попередній статті ми навчились вибирати елементи через селектори. Тепер прийшов час зрозуміти, з чого складається кожен вибраний елемент і як контролювати його розміри та відступи.

Анатомія блокової моделі

Кожен елемент у CSS — це прямокутна коробка, що складається з чотирьох концентричних шарів (від внутрішнього до зовнішнього):

Loading diagram...
graph TB
    subgraph M["margin — зовнішній відступ"]
        subgraph B["border — рамка"]
            subgraph P["padding — внутрішній відступ"]
                C["content — вміст"]
            end
        end
    end
    style C fill:#3b82f6,color:#fff,stroke:#1d4ed8
    style P fill:#93c5fd,color:#1e293b,stroke:#3b82f6
    style B fill:#f59e0b,color:#1e293b,stroke:#b45309
    style M fill:#64748b,color:#fff,stroke:#334155
Content (вміст)
area
Це простір для тексту, зображень, дочірніх елементів — того, що ви бачите. Саме до цієї області застосовуються width і height (за замовчуванням).
Padding (внутрішній відступ)
length
Простір між вмістом та рамкою. Padding «розсуває» елемент зсередини. Фон елемента (background-color) поширюється і на padding.
Border (рамка)
length + style + color
Видима межа елемента. Має три компоненти: товщину, стиль (solid, dashed, dotted...) та колір.
Margin (зовнішній відступ)
length
Простір між елементом та його сусідами. Margin завжди прозорий — фон через нього не видно.

Живий приклад: чотири шари

<div class="box-demo">
    <div class="box-example">Вміст (content)</div>
</div>

.box-demo {
    background-color: #e2e8f0;
    padding: 2rem;
}

.box-example {
    /* Content */
    width: 200px;
    height: 80px;

    /* Padding — внутрішній відступ */
    padding: 20px;

    /* Border — рамка */
    border: 5px solid #f59e0b;

    /* Margin — зовнішній відступ */
    margin: 30px;

    /* Фон поширюється на content + padding */
    background-color: #dbeafe;

    /* Текст */
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}
Preview

Розберемо, який фактичний розмір займає цей елемент:

ШарЛівоПравоРазом по горизонталі
Content——200px
Padding20px20px40px
Border5px5px10px
Видима ширина250px
Margin30px30px60px
Повна ширина (з margin)310px
За замовчуванням width: 200px задає ширину лише content. Padding і border додаються поверх. Це поведінка box-sizing: content-box — значення за замовчуванням у CSS. Саме через це елемент «ширший», ніж ви очікували.

Властивості padding, border, margin

Padding — внутрішній відступ

Padding створює простір між вмістом і рамкою. Він «дихання» для тексту всередині елемента:

<p class="no-padding">Текст без padding — притиснутий до країв.</p>
<p class="with-padding">Текст з padding — має простір для дихання.</p>
<p class="asymmetric-padding">Текст з асиметричним padding.</p>

p {
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    color: #1e293b;
}

.no-padding {
    padding: 0;
}

.with-padding {
    padding: 1rem;
}

.asymmetric-padding {
    padding: 0.5rem 2rem 0.5rem 2rem;
}
Preview

Скорочений запис padding:

СинтаксисЗначення
padding: 10px;Всі 4 сторони — 10px
padding: 10px 20px;Верх/низ — 10px, ліво/право — 20px
padding: 10px 20px 15px;Верх — 10px, ліво/право — 20px, низ — 15px
padding: 10px 20px 15px 5px;Верх → право → низ → ліво (за годинниковою стрілкою)
Запам'ятовуйте порядок за годинниковою стрілкою: Top → Right → Bottom → Left (мнемоніка — TRouBLe — «проблема»).

Також доступні окремі властивості для кожної сторони:

.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 5px;
}

Border — рамка

Рамка розташована між padding та margin. Вона має три компоненти:

<div class="border-solid">solid — суцільна</div>
<div class="border-dashed">dashed — пунктирна</div>
<div class="border-dotted">dotted — крапкова</div>
<div class="border-double">double — подвійна</div>
<div class="border-mixed">Різні сторони — різні стилі</div>

div {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    background-color: #f8fafc;
}

.border-solid {
    border: 3px solid #3b82f6;
}

.border-dashed {
    border: 3px dashed #f59e0b;
}

.border-dotted {
    border: 3px dotted #10b981;
}

.border-double {
    border: 4px double #8b5cf6;
}

.border-mixed {
    border-top: 4px solid #3b82f6;
    border-right: 2px dashed #f59e0b;
    border-bottom: 4px solid #3b82f6;
    border-left: 2px dashed #f59e0b;
}
Preview

Скорочений запис: border: товщина стиль колір;

.element {
    border: 2px solid #3b82f6;
}

/* Еквівалент */
.element {
    border-width: 2px;
    border-style: solid;
    border-color: #3b82f6;
}

Окремі сторони: border-top, border-right, border-bottom, border-left.

border-radius — заокруглення кутів:

<div class="radius-small">4px</div>
<div class="radius-medium">12px</div>
<div class="radius-large">24px</div>
<div class="radius-pill">50px (пілюля)</div>
<div class="radius-circle">50%</div>

div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    background-color: #3b82f6;
    color: white;
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    margin: 0.5rem;
    border: none;
}

.radius-small {
    border-radius: 4px;
}
.radius-medium {
    border-radius: 12px;
}
.radius-large {
    border-radius: 24px;
}
.radius-pill {
    border-radius: 50px;
}
.radius-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
Preview
border-radius: 50% перетворює квадрат на коло. Для прямокутника з різними сторонами — вийде еліпс. Цей прийом часто використовується для аватарів.

Margin — зовнішній відступ

Margin створює прозорий простір між елементом і його сусідами:

<div class="box box-a">Елемент A<br /><small>margin: 0</small></div>
<div class="box box-b">Елемент B<br /><small>margin: 20px</small></div>
<div class="box box-c">Елемент C<br /><small>margin: 0</small></div>

.box {
    padding: 1rem;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: white;
    border-radius: 6px;
}

.box-a {
    background-color: #3b82f6;
    margin: 0;
}

.box-b {
    background-color: #f59e0b;
    margin: 20px;
}

.box-c {
    background-color: #10b981;
    margin: 0;
}

small {
    opacity: 0.8;
}
Preview

Синтаксис скорочення ідентичний padding — порядок за годинниковою стрілкою (top → right → bottom → left).

Важлива відмінність від padding: margin може мати від'ємні значення:

.overlap {
    margin-top: -20px; /* Елемент «заїде» на попередній на 20px */
}
Від'ємні margin — потужний, але небезпечний інструмент. Вони можуть спричинити перекриття елементів і неочікувані візуальні ефекти. Використовуйте обачно.

box-sizing — революція розрахунку розмірів

Згадайте проблему з початку статті: width: 200px + padding: 20px + border: 5px = 250px видимої ширини. Це поведінка content-box — значення за замовчуванням.

CSS пропонує альтернативу: border-box.

width задає ширину лише content. Padding і border додаються поверх:

<div class="container">
    <div class="content-box-demo">
        box-sizing: content-box<br />
        width: 200px<br />
        Видима: 250px
    </div>
</div>

.container {
    background-color: #fef3c7;
    padding: 1rem;
    font-family: system-ui, sans-serif;
}

.content-box-demo {
    box-sizing: content-box; /* За замовчуванням */
    width: 200px;
    padding: 20px;
    border: 5px solid #f59e0b;
    background-color: #dbeafe;
    font-size: 0.85rem;
    color: #1e293b;
}
Preview

Розрахунок: 200 (content) + 20×2 (padding) + 5×2 (border) = 250px

::

width задає ширину всієї видимої коробки (content + padding + border). Браузер автоматично зменшує content, щоб все вмістилось:

<div class="container">
    <div class="border-box-demo">
        box-sizing: border-box<br />
        width: 200px<br />
        Видима: 200px!
    </div>
</div>

.container {
    background-color: #dcfce7;
    padding: 1rem;
    font-family: system-ui, sans-serif;
}

.border-box-demo {
    box-sizing: border-box; /* Рекомендовано! */
    width: 200px;
    padding: 20px;
    border: 5px solid #10b981;
    background-color: #dbeafe;
    font-size: 0.85rem;
    color: #1e293b;
}
Preview

Розрахунок: 200px (загальна видима ширина) = 150 (content, автоматично) + 20×2 (padding) + 5×2 (border)

::

Loading diagram...
graph LR
    subgraph CB["content-box"]
        direction LR
        A["width: 200px"] --> B["content = 200px"]
        B --> C["+ padding 40px"]
        C --> D["+ border 10px"]
        D --> E["Видима = 250px ❌"]
    end
    subgraph BB["border-box"]
        direction LR
        F["width: 200px"] --> G["Видима = 200px ✅"]
        G --> H["border 10px"]
        H --> I["padding 40px"]
        I --> J["content = 150px"]
    end
    style E fill:#ef4444,color:#fff
    style G fill:#10b981,color:#fff

Глобальний border-box — стандарт індустрії

У реальних проєктах завжди використовують border-box для всіх елементів. Це робиться через універсальний селектор:

/* CSS Reset — стандарт у кожному проєкті */
*,
*::before,
*::after {
    box-sizing: border-box;
}
Цей код зустрічається буквально в кожному професійному CSS-файлі. Ми додаємо ::before та ::after, щоб псевдоелементи теж підкорялись border-box. Запам'ятайте цей патерн — вам слід завжди починати з нього.

Центрування блоків з margin: auto

Один із найпоширеніших прийомів — горизонтальне центрування блокового елемента:

<div class="page">
    <div class="centered-block">Цей блок відцентровано через margin: auto</div>
</div>

.page {
    background-color: #f1f5f9;
    padding: 1rem;
    font-family: system-ui, sans-serif;
}

.centered-block {
    width: 300px;
    padding: 1.5rem;
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: #1e293b;

    /* Магія центрування */
    margin: 0 auto;
}
Preview

Як це працює: коли елемент має фіксовану width, а margin-left і margin-right встановлені в auto, браузер рівномірно розподіляє вільний простір між лівим та правим відступами.

margin: auto працює для горизонтального центрування тільки для блокових елементів з явно заданою шириною. Для вертикального центрування margin: auto не працює у звичайному потоці — для цього використовують Flexbox або Grid (розглянемо в наступних статтях).

Колапс марджинів (Margin Collapse)

Це один із найнесподіваніших механізмів CSS, що спантеличує навіть досвідчених розробників.

Що таке колапс?

Коли два вертикальні margin стикаються, вони не додаються, а зливаються — залишається більший з двох:

<div class="collapse-demo">
    <div class="block block-a">margin-bottom: 30px</div>
    <div class="block block-b">margin-top: 20px</div>
    <p class="note">↑ Відстань між блоками = 30px (більший), а не 50px (сума)</p>
</div>

.collapse-demo {
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
}

.block {
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
}

.block-a {
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    margin-bottom: 30px;
}

.block-b {
    background-color: #dcfce7;
    border: 2px solid #10b981;
    margin-top: 20px;
}

.note {
    color: #64748b;
    font-style: italic;
    margin-top: 0.5rem;
}
Preview
Loading diagram...
graph LR
    A["Блок A\nmargin-bottom: 30px"] --- B["Результат:\n30px (а не 50px)"] --- C["Блок B\nmargin-top: 20px"]
    style A fill:#3b82f6,color:#fff
    style B fill:#f59e0b,color:#fff
    style C fill:#10b981,color:#fff

Правила колапсу

✅ Колапсує

  • Вертикальні margin суміжних блокових елементів
  • Margin батька та першого/останнього дочірнього елемента (якщо між ними немає padding, border або вмісту)
  • Margin порожнього елемента (верхній і нижній зливаються)

❌ Не колапсує

  • Горизонтальні margin (left/right) — ніколи
  • Елементи з display: flex або display: grid
  • Елементи з overflow відмінним від visible
  • Елементи з float або position: absolute
  • Елементи, розділені padding або border батька

Колапс батько-дитина

Це ще підступніший випадок — margin дочірнього елемента «витікає» назовні батька:

<div class="parent-demo">
    <div class="parent-collapse">
        <p class="child-collapse">Дочірній елемент з margin-top: 40px</p>
    </div>
    <p class="caption">↑ Margin «витік» за межі батька!</p>
</div>

<div class="parent-demo">
    <div class="parent-fixed">
        <p class="child-collapse">Дочірній елемент з margin-top: 40px</p>
    </div>
    <p class="caption">↑ Виправлено: padding-top на батьку блокує колапс</p>
</div>

.parent-demo {
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.parent-collapse {
    background-color: #fee2e2;
    border: 2px solid #ef4444;
    /* Немає padding-top — margin дочірнього «витікає» */
}

.parent-fixed {
    background-color: #dcfce7;
    border: 2px solid #10b981;
    padding-top: 1px; /* Достатньо 1px, щоб зламати колапс */
}

.child-collapse {
    margin-top: 40px;
    margin-bottom: 0;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
}

.caption {
    color: #64748b;
    font-style: italic;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
Preview
Найпростіші способи запобігти колапсу батько-дитина:
  • Додайте padding-top: 1px (або будь-яке значення) батьку
  • Додайте border-top: 1px solid transparent батьку
  • Додайте overflow: hidden батьку
  • Використайте display: flex або display: grid на батьку (вони повністю вимикають margin collapse)

display: block, inline, inline-block

Кожен HTML-елемент має тип відображення за замовчуванням — блоковий або рядковий. Цей тип визначає, як елемент поводиться у потоці документа.

display: block

Блокові елементи займають всю доступну ширину і починаються з нового рядка:

<div class="block-demo">block — займає весь рядок</div>
<div class="block-demo">block — починає новий рядок</div>
<div class="block-demo short">block з width: 200px — все одно новий рядок</div>

.block-demo {
    display: block;
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    border-radius: 4px;
}

.short {
    width: 200px;
}
Preview

Блокові за замовчуванням: <div>, <p>, <h1>–<h6>, <section>, <article>, <ul>, <ol>, <li>, <header>, <footer>, <form>.

Характеристики:

  • Починається з нового рядка
  • Займає всю доступну ширину батька (якщо не задана width)
  • Реагує на width, height, margin, padding — повністю

display: inline

Рядкові елементи займають лише стільки місця, скільки потрібно для вмісту, і не переносяться на новий рядок:

<p>
    Це абзац з <span class="inline-demo">рядковим елементом</span>, який не порушує
    <span class="inline-demo">потік тексту</span> і продовжується у тому ж рядку.
</p>

p {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #1e293b;
}

.inline-demo {
    display: inline;
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    padding: 2px 6px;
    border-radius: 3px;
    /* width та height — ІГНОРУЮТЬСЯ для inline */
    /* margin-top та margin-bottom — ІГНОРУЮТЬСЯ */
}
Preview

Рядкові за замовчуванням: <span>, <a>, <strong>, <em>, <code>, <img>, <input>.

Для inline-елементів width, height, margin-top та margin-bottomне працюють. Діють лише горизонтальні margin-left/margin-right та padding (але вертикальний padding не впливає на висоту рядка).

display: inline-block

Гібрид, що поєднує найкраще з обох світів: елемент залишається в потоці рядка, але підтримує блокові властивості:

<nav>
    <a href="#" class="nav-link">Головна</a>
    <a href="#" class="nav-link active">Про нас</a>
    <a href="#" class="nav-link">Послуги</a>
    <a href="#" class="nav-link">Контакти</a>
</nav>

nav {
    background-color: #1e293b;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: system-ui, sans-serif;
}

.nav-link {
    display: inline-block; /* Рядковий, але з блоковими можливостями */
    padding: 0.5rem 1rem;
    color: #e2e8f0;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.nav-link:hover {
    background-color: #334155;
}

.nav-link.active {
    background-color: #3b82f6;
    color: white;
}
Preview

Порівняльна таблиця

Характеристикаblockinlineinline-block
Новий рядок✅❌❌
Ширина на весь рядок✅❌❌
width / height✅❌✅
Вертикальний margin✅❌✅
Горизонтальний margin✅✅✅
padding (повний)✅⚠️ (не впливає на layout)✅
display: none — ще одне важливе значення. Воно повністю видаляє елемент з потоку документа — він не займає місця і не відображається. Про різницю з visibility: hidden — нижче.

width та height — контроль розмірів

Базові властивості

.element {
    width: 300px; /* Фіксована ширина */
    height: 200px; /* Фіксована висота */
}

min- та max- обмеження

Часто задавати жорстку ширину — погана ідея (сторінка має бути адаптивною). Натомість використовують обмеження:

.card {
    width: 100%; /* Займай всю ширину батька */
    max-width: 600px; /* Але не більше 600px */
    min-width: 280px; /* І не менше 280px */
}

<div class="responsive-box">
    Цей блок має max-width: 400px і width: 100%. Він адаптується до розміру контейнера, але ніколи не стане ширшим за
    400px.
</div>

.responsive-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    box-sizing: border-box;
}
Preview
Патерн width: 100%; max-width: Npx; margin: 0 auto; — це стандартний спосіб створити центрований контейнер, що адаптується до малих екранів. Ви побачите його на більшості сайтів.

height: auto та проблема фіксованої висоти

Уникайте фіксованої height для текстового контенту. Якщо тексту стане більше (наприклад, через переклад), він «вилізе» за межі елемента. Натомість дозвольте висоті визначатися автоматично (height: auto — значення за замовчуванням), а для обмежень використовуйте min-height.
/* ❌ Погано — текст може переповнити */
.card {
    height: 200px;
}

/* ✅ Добре — мінімальна висота, але контент може розширити */
.card {
    min-height: 200px;
}

Overflow — контроль переповнення

Що станеться, коли вміст не вміщується у задані розміри? Це контролює властивість overflow:

Вміст виходить за межі елемента і перекриває сусідів:

<div class="overflow-container">
    <div class="overflow-visible">
        Цей текст занадто довгий для цього маленького контейнера і він виходить за його межі, що може зламати верстку.
    </div>
    <p class="neighbor">Сусідній елемент — може бути перекритий.</p>
</div>

.overflow-container {
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
}

.overflow-visible {
    width: 200px;
    height: 60px;
    overflow: visible; /* За замовчуванням */
    background-color: #fee2e2;
    border: 2px solid #ef4444;
    padding: 0.5rem;
    border-radius: 4px;
}

.neighbor {
    margin-top: 2rem;
    color: #64748b;
}
Preview

::

Вміст обрізається — те, що не вміщується, не видно:

<div class="overflow-hidden">
    Цей текст занадто довгий для цього маленького контейнера, але overflow: hidden обрізає все, що виходить за межі.
</div>

.overflow-hidden {
    width: 200px;
    height: 60px;
    overflow: hidden;
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 0.5rem;
    border-radius: 4px;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
}
Preview

З'являються смуги прокрутки (завжди, навіть якщо вміст вміщується):

<div class="overflow-scroll">
    Цей текст занадто довгий для цього маленького контейнера. Але overflow: scroll дозволяє прокручувати вміст.
    Користувач може прокрутити, щоб побачити все.
</div>

.overflow-scroll {
    width: 200px;
    height: 60px;
    overflow: scroll;
    background-color: #dcfce7;
    border: 2px solid #10b981;
    padding: 0.5rem;
    border-radius: 4px;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
}
Preview

Смуги прокрутки з'являються тільки за потреби:

<div class="overflow-auto short-text">Короткий текст — без скролу.</div>
<div class="overflow-auto long-text">
    Довгий текст, що потребує прокрутки. Overflow: auto автоматично додає скрол, лише коли вміст перевищує розміри
    контейнера. Це найзручніший варіант.
</div>

.overflow-auto {
    width: 200px;
    height: 60px;
    overflow: auto;
    background-color: #fef9c3;
    border: 2px solid #f59e0b;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
    color: #1e293b;
}
Preview

::

Також доступні осьові варіанти: overflow-x (горизонтальна прокрутка) та overflow-y (вертикальна прокрутка):

.horizontal-scroll {
    overflow-x: auto; /* Горизонтальний скрол за потреби */
    overflow-y: hidden; /* Вертикальний — приховати */
}

visibility: hidden vs display: none

Обидві властивості «приховують» елемент, але принципово по-різному:

<div class="vis-demo">
    <div class="box-vis">Видимий</div>
    <div class="box-vis hidden-vis">visibility: hidden</div>
    <div class="box-vis">Видимий</div>
</div>

<hr />

<div class="vis-demo">
    <div class="box-vis">Видимий</div>
    <div class="box-vis hidden-disp">display: none</div>
    <div class="box-vis">Видимий</div>
</div>

.vis-demo {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 0.85rem;
}

.box-vis {
    padding: 1rem 1.5rem;
    background-color: #dbeafe;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    color: #1e293b;
    text-align: center;
}

/* Елемент невидимий, але ЗАЙМАЄ місце */
.hidden-vis {
    visibility: hidden;
}

/* Елемент повністю ВИДАЛЕНО з потоку */
.hidden-disp {
    display: none;
}

hr {
    border: none;
    border-top: 1px dashed #cbd5e1;
    margin: 1rem 0;
}
Preview
Характеристикаvisibility: hiddendisplay: none
Елемент видимий❌❌
Займає місце в потоці✅❌
Доступний для скрін-рідерів❌❌
Дочірні елементиМожуть бути visibility: visibleПовністю приховані
Анімація приховуванняПідтримує transitionНе підтримує
Коротко: visibility: hidden — це «невидимий, але він тут». display: none — це «його не існує».

outline — не плутайте з border

Є ще одна «рамка», про яку варто знати — outline. Вона виглядає схоже на border, але має ключову відмінність:

.element:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

Border

  • Є частиною блокової моделі
  • Впливає на розмір елемента
  • Може мати різні стилі на різних сторонах
  • Підтримує border-radius

Outline

  • Не є частиною блокової моделі
  • Не впливає на розмір та позицію
  • Однаковий з усіх сторін
  • Не підтримує різні сторони
Ніколи не видаляйте outline на елементах фокусу (outline: none) без заміни! Це критично для доступності — користувачі, що навігують клавіатурою (Tab), орієнтуються саме по outline. Якщо стандартний outline не підходить — замініть його кастомним стилем :focus-visible.

Практичні завдання

Рівень 1 — Базовий

Рівень 2 — Логіка та комбінування

Рівень 3 — Створення з нуля

Підсумок

📦 Блокова модель

Кожен елемент — це коробка з 4 шарами: content → padding → border → margin.

📐 box-sizing

border-box робить width інтуїтивним: padding і border входять у задану ширину. Завжди використовуйте глобальний *, *::before, *::after { box-sizing: border-box; }.

💥 Margin Collapse

Вертикальні margin зливаються (залишається більший). Padding, border, overflow, display: flex/grid — блокують колапс.

🔀 Display

block — новий рядок, вся ширина. inline — в потоці тексту, ігнорує width/height. inline-block — гібрид з перевагами обох.

Корисні посилання

Вступ до CSS. Селектори та специфічність

Глибоке занурення у CSS: три способи підключення стилів, анатомія CSS-правила, типи селекторів (тегові, класи, ID, атрибутні), комбінатори, псевдокласи, псевдоелементи, каскад та специфічність.

Типографіка в CSS. Шрифти та текст

Глибоке занурення у CSS-типографіку: font-family, @font-face, Google Fonts, font-size (px/em/rem), line-height, text-align, text-decoration, text-overflow, одиниці виміру та CSS Custom Properties для системи типографіки.

Copyright © 2026