Пошук уроків, статей та іншого контенту
Опануйте модель блока CSS: вміст, внутрішні й зовнішні відступи та межі елемента.
Блокова модель CSS описує, як браузер обчислює розміри HTML-елемента та простір навколо нього.
Кожен елемент можна уявити як набір чотирьох шарів:
Вміст (content) — текст, зображення або дочірні елементи.
Внутрішній відступ (padding) — простір між вмістом і межею.
Межа (border) — лінія навколо елемента.
Зовнішній відступ (margin) — простір між елементом та іншими елементами.
У спрощеному вигляді модель має таку структуру:
margin
┌──────────────────────────────┐
│ border │
│ ┌────────────────────────┐ │
│ │ padding │ │
│ │ ┌──────────────────┐ │ │
│ │ │ content │ │ │
│ │ └──────────────────┘ │ │
│ └────────────────────────┘ │
└──────────────────────────────┘Вміст — це внутрішня область елемента. Для текстового елемента вмістом є текст, а для контейнера — його дочірні елементи.
Властивості width і height за замовчуванням задають розмір саме області вмісту:
.card {
width: 300px;
height: 150px;
}У цьому прикладі ширина вмісту становить 300px, а його висота — 150px. Внутрішні відступи та межі, якщо їх додати, збільшать загальний розмір елемента.
paddingВластивість padding додає простір між вмістом і межею елемента.
.card {
padding: 20px;
}Тепер вміст матиме відступ 20px з усіх чотирьох боків.
Можна задавати відступи для кожної сторони окремо:
.card {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}Для скороченого запису використовують різну кількість значень:
/* 20px з усіх боків */
.card {
padding: 20px;
}
/* 10px зверху і знизу, 20px зліва і справа */
.card {
padding: 10px 20px;
}
/* 10px зверху, 20px справа і зліва, 30px знизу */
.card {
padding: 10px 20px 30px;
}
/* зверху, справа, знизу, зліва */
.card {
padding: 10px 20px 30px 40px;
}Значення padding не можуть бути від’ємними.
borderМежа оточує вміст і внутрішній відступ.
Щоб побачити межу, потрібно задати її ширину, стиль і колір:
.card {
border: 2px solid #333;
}Тут:
2px — товщина межі;
solid — суцільний стиль;
#333 — колір.
Межу можна налаштувати для окремих сторін:
.card {
border-top: 2px solid tomato;
border-right: 1px dashed gray;
border-bottom: 2px solid tomato;
border-left: 1px dashed gray;
}Поширені стилі межі:
solid — суцільна;
dashed — штрихова;
dotted — крапкова;
double — подвійна.
Якщо ширину межі не вказати, її значення за замовчуванням може бути medium, але межа все одно не відображатиметься без заданого стилю.
marginВластивість margin додає простір за межами елемента. Вона впливає на відстань між сусідніми елементами.
.card {
margin: 20px;
}Це створює зовнішній відступ 20px з усіх боків.
Для окремих сторін можна використовувати:
.card {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}Як і для padding, для margin доступний скорочений запис:
/* 20px з усіх боків */
.card {
margin: 20px;
}
/* 10px зверху і знизу, 20px зліва і справа */
.card {
margin: 10px 20px;
}
/* 10px зверху, 20px зліва і справа, 30px знизу */
.card {
margin: 10px 20px 30px;
}
/* зверху, справа, знизу, зліва */
.card {
margin: 10px 20px 30px 40px;
}На відміну від padding, значення margin може бути від’ємним. Проте на початковому етапі краще використовувати невід’ємні значення, щоб легше розуміти розташування елементів.
За стандартним правилом content-box властивість width задає тільки ширину вмісту.
Наприклад:
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
}Фактична ширина елемента буде:
200px + 20px + 20px + 5px + 5px = 250pxТобто:
200px — ширина вмісту;
20px — лівий внутрішній відступ;
20px — правий внутрішній відступ;
5px — ліва межа;
5px — права межа.
Зовнішні відступи margin не входять до ширини самого елемента, але займають простір навколо нього:
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}Фактична ширина самого елемента — 250px, а разом із зовнішніми відступами він займає 270px горизонтального простору.
box-sizingЩоб width і height включали також padding і border, використовують:
box-sizing: border-box;Приклад:
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}Тепер загальна ширина елемента дорівнює 200px. Внутрішній відступ і межа входять у ці 200px, тому область вмісту стає меншою.
Часто border-box застосовують до всіх елементів:
* {
box-sizing: border-box;
}Це робить обчислення розмірів більш передбачуваними.
У цьому прикладі картка має ширину, внутрішній відступ, межу та зовнішній відступ:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Блокова модель CSS</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.card {
width: 320px;
margin: 30px auto;
padding: 24px;
border: 3px solid #2563eb;
background-color: white;
}
.card h1 {
margin: 0 0 12px;
font-size: 24px;
}
.card p {
margin: 0;
line-height: 1.5;
}
</style>
</head>
<body>
<article class="card">
<h1>Блокова модель</h1>
<p>
Вміст, внутрішній відступ, межа та зовнішній відступ
визначають розмір і розташування елемента.
</p>
</article>
</body>
</html>У цьому прикладі:
width: 320px задає загальну ширину картки, бо використовується border-box;
padding: 24px створює простір між текстом і межею;
border додає синю межу;
margin: 30px auto додає вертикальні відступи та центрує картку по горизонталі;
margin: 0 у заголовка й абзацу прибирає стандартні зовнішні відступи браузера.
margin: autoДля блочного елемента з заданою шириною можна використати:
.container {
width: 600px;
margin: 0 auto;
}Значення auto для лівого та правого зовнішніх відступів розподіляє вільний простір порівну. У результаті елемент центрується горизонтально.
Цей спосіб працює, якщо:
елемент має блочний тип відображення;
для нього задана ширина або інша обмежена ширина;
для лівого та правого margin використано auto.
Інструменти розробника браузера показують кожен шар елемента:
область вмісту;
padding;
border;
margin.
Щоб перевірити елемент:
Відкрийте сторінку в браузері.
Натисніть правою кнопкою на елемент.
Виберіть пункт для перегляду або перевірки елемента.
Знайдіть схему блокової моделі в панелі стилів.
Це допомагає з’ясувати, чому елемент має неочікуваний розмір або чому між елементами з’явився зайвий простір.
padding і marginpadding створює простір усередині елемента.
margin створює простір зовні елемента.
.card {
padding: 20px; /* відсуває вміст від межі */
margin: 20px; /* відсуває картку від сусідніх елементів */
}За замовчуванням width не включає padding і border. Якщо елемент стає ширшим, ніж очікувалося, перевірте значення box-sizing.
height для великого обсягу текстуФіксована висота може призвести до переповнення, якщо тексту стане більше:
.card {
height: 100px;
}Зазвичай краще дозволити висоті визначатися вмістом, а для внутрішніх відступів використовувати padding.
Заголовки, абзаци та деякі інші елементи мають стандартні margin. Якщо відступ виглядає несподівано, перевірте стилі самого елемента:
h1,
p {
margin: 0;
}Блокова модель складається з вмісту, padding, border і margin.
padding створює внутрішній простір між вмістом і межею.
border визначає межу елемента.
margin створює зовнішній простір між елементами.
За замовчуванням width і height стосуються лише вмісту.
box-sizing: border-box включає padding і border у задані розміри.
margin: 0 auto можна використати для горизонтального центрування блока із заданою шириною.