Пошук уроків, статей та іншого контенту
Дізнайтеся, як задавати зовнішні відступи, об’єднання вертикальних margin і автоматичне вирівнювання блоків.
marginmargin — це зовнішній відступ елемента. Він визначає відстань між межами елемента та сусідніми елементами або батьківським контейнером.
Схематично коробкова модель елемента виглядає так:
content — вміст;
padding — внутрішній відступ;
border — межа;
margin — зовнішній відступ.
margin не займає місце всередині самого елемента. Він створює простір навколо нього.
.card {
margin: 20px;
}У цьому прикладі з усіх чотирьох боків елемента буде зовнішній відступ 20px.
Зовнішній відступ можна задати окремо для кожної сторони:
.element {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}Доступні властивості:
margin-top — зверху;
margin-right — праворуч;
margin-bottom — знизу;
margin-left — ліворуч.
Значення можуть задаватися в різних одиницях:
.element {
margin-top: 16px;
margin-bottom: 2rem;
margin-left: 5%;
}marginЗамість чотирьох окремих властивостей можна використовувати одну властивість margin.
.element {
margin: 20px;
}Відступ 20px застосовується до всіх чотирьох сторін.
.element {
margin: 10px 20px;
}10px — зверху і знизу;
20px — праворуч і ліворуч.
.element {
margin: 10px 20px 30px;
}10px — зверху;
20px — праворуч і ліворуч;
30px — знизу.
.element {
margin: 10px 20px 30px 40px;
}Значення застосовуються за годинниковою стрілкою:
зверху;
праворуч;
знизу;
ліворуч.
Запам’ятати порядок можна за схемою:
top → right → bottom → left<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Відступи margin</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.card {
width: 300px;
margin: 30px auto;
padding: 20px;
background-color: white;
border: 1px solid #cccccc;
}
.card-title {
margin: 0 0 12px;
color: #222222;
}
.card-text {
margin: 0;
color: #555555;
}
</style>
</head>
<body>
<article class="card">
<h1 class="card-title">Заголовок картки</h1>
<p class="card-text">
Текст усередині картки має внутрішні та зовнішні відступи.
</p>
</article>
</body>
</html>У цьому прикладі:
body { margin: 0; } прибирає стандартний відступ сторінки;
margin: 30px auto додає 30px зверху і знизу;
auto автоматично розподіляє вільний простір зліва і справа;
padding: 20px створює простір між межами картки та її вмістом;
margin: 0 0 12px прибирає відступи зверху і з боків заголовка, але залишає 12px знизу.
autoЗначення auto дає браузеру змогу автоматично визначити величину відступу.
Найчастіше його використовують для горизонтального центрування блочного елемента:
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}Скорочений варіант:
.container {
width: 800px;
margin: 0 auto;
}У цьому записі:
0 — верхній і нижній відступ;
auto — лівий і правий відступ.
Якщо ширина елемента менша за ширину батьківського контейнера, браузер розподілить вільний простір порівну між лівим і правим боками.
Для такого вирівнювання елемент повинен мати обмежену ширину, наприклад width або max-width:
.content {
max-width: 700px;
margin: 0 auto;
}Якщо блочний елемент займає всю доступну ширину, вільного простору для auto не залишиться, і помітного центрування не буде.
marginВертикальні відступи між блочними елементами можуть об’єднуватися. Це явище називають об’єднанням або схлопуванням зовнішніх відступів.
Розглянемо приклад:
.first {
margin-bottom: 30px;
}
.second {
margin-top: 20px;
}Якщо елементи розташовані один під одним, відстань між ними зазвичай буде не 50px, а 30px.
Браузер бере більший із двох вертикальних відступів:
max(30px, 20px) = 30pxЦе можна уявити так:
<div class="first">Перший блок</div>
<div class="second">Другий блок</div>.first {
margin-bottom: 30px;
}
.second {
margin-top: 20px;
}Між блоками залишиться 30px.
При об’єднанні вертикальних margin браузер не складає значення, а використовує найбільше:
.first {
margin-bottom: 16px;
}
.second {
margin-top: 24px;
}Відстань між елементами буде 24px, а не 40px.
Горизонтальні відступи зазвичай не об’єднуються. Якщо один елемент має margin-right: 20px, а інший — margin-left: 30px, відстань між ними становитиме 50px.
marginДля margin дозволені від’ємні значення:
.element {
margin-top: -10px;
}Від’ємний відступ може перемістити елемент ближче до сусіднього або частково накласти його на інший елемент.
Такі значення використовують обережно, оскільки вони можуть ускладнити передбачення розташування елементів. Для звичайного розміщення блоків краще починати з додатних значень margin.
margin і стандартні відступи браузераДеякі HTML-елементи мають стандартні відступи, встановлені браузером. Наприклад, заголовки та абзаци зазвичай мають власні margin.
h1 {
margin: 0;
}
p {
margin: 0;
}Так можна прибрати стандартні відступи й задати власні:
h1 {
margin: 0 0 16px;
}
p {
margin: 0;
}margin і paddingЦі властивості відповідають за різні види відступів:
.card {
margin: 20px;
padding: 16px;
}margin: 20px — відстань між карткою та іншими елементами;
padding: 16px — відстань між межами картки та її вмістом.
Якщо потрібно відсунути сам блок від сусідів, використовуйте margin. Якщо потрібно відсунути текст від межі блока, використовуйте padding.
margin: auto центрує текст.title {
margin: auto;
}margin: auto центрує сам блочний елемент у доступному просторі, а не текст усередині нього.
Для центрування тексту використовують:
.title {
text-align: center;
}.block {
margin: 0 auto;
}Якщо блок займає всю ширину батьківського елемента, auto не створить помітних бокових відступів. Додайте ширину або максимальну ширину:
.block {
max-width: 600px;
margin: 0 auto;
}Якщо між двома блоками встановлено margin-bottom: 20px і margin-top: 30px, відстань не обов’язково становитиме 50px. Для звичайних блочних елементів вертикальні відступи можуть об’єднатися, і браузер використає більший — 30px.
margin замість paddingЯкщо текст має бути далі від межі картки, потрібно використовувати padding:
.card {
padding: 20px;
}margin перемістить саму картку, а не її вміст.
margin задає зовнішні відступи елемента.
margin: 20px встановлює однаковий відступ з усіх боків.
У скороченому записі значення йдуть у порядку top, right, bottom, left.
margin: 0 auto часто використовують для горизонтального центрування блока.
Для центрування потрібен вільний простір, тому елементу зазвичай задають width або max-width.
Вертикальні margin сусідніх блочних елементів можуть об’єднуватися: використовується найбільше значення.
margin створює простір навколо елемента, а padding — простір усередині нього.