На практиці
- Дока Дог радить
- Єгор Левченко радить
- Олена Батицька радить
Оновлено 12 квітня 2024
Коротко
Скопіювати посилання "Коротко" Скопійовано
Визначає розмір зовнішнього відступу навколо елемента. Іноді зовнішні відступи називають полями.
Щоб зробити відступ тільки з одного боку, використовуй margin – top (зверху), margin – right (праворуч), margin – bottom (знизу) або margin – left (ліворуч).
Або більш сучасні margin - inline - start , margin - inline - end , margin - block - start та margin - block - end .
Приклади
Скопіювати посилання "Приклади" Скопійовано
Застосовується до всіх чотирьох сторін:
.selector margin: 1em;
margin: -3px;>
.selector
margin:
1em;
margin:
-3px;
>
Зверху та знизу | ліворуч і праворуч:
.selector margin: 5% auto;>
.selector
margin:
5% auto;
>
Згори | ліворуч та праворуч | знизу:
.selector margin: 1em auto 2em;>
.selector
margin:
1em auto 2em;
>
Згори | праворуч | знизу | зліва:
.selector margin: 2px 1em 0 auto;>
.selector
margin:
2px
1em
0 auto;
>
Як зрозуміти
Скопіювати посилання "Як зрозуміти" Скопійовано
Значення margin може виражатися в пікселях (px), відсотках (%) або словом auto, а також у будь-яких інших доступних у веб одиницях вимірювання.
Негативне значення margin теж можливе: замість відступу, воно, навпаки, ставить елемент ближче до сусіднього.
Можна встановити margin за допомогою одного, двох, трьох або чотирьох значень. Залежно від цього відступ з'явиться для всіх або тільки для зазначених сторін:
- Якщо вказати одне значення (наприклад, margin : 1px; ), відступ в 1 піксель з'явиться з усіх боків;
- Якщо вказати два ( margin : 5 % auto; ), перше значення застосовується для верхнього та нижнього відступу, а друге для лівого та правого;
- При трьох значення ( margin : 1em auto 2em; ) перше робить відступ зверху, друге - зліва та справа, третє - знизу;
- Якщо вказати чотири значення ( margin : 2px 1em 0 auto; ), вони використовуються за годинниковою стрілкою для кожної із сторін: зверху, справа, знизу і зліва.
Як пишеться
Скопіювати посилання "Як пишеться" Скопійовано
Розмір відступу margin можна задати такими значеннями:
Число з одиницями виміру - фіксований відступ у пікселях px або інших одиницях.
Відсотки - відступ у відсотках від ширини блоку.
auto - браузер сам вибирає відповідний розмір відступу. Наприклад, можна використовувати в деяких випадках центрування елемента.
Підказки
Скопіювати посилання "Підказки" Скопійовано
💡 Властивість margin створює простір навколо елемента, в той час, як padding додає простір всередині елемент.
💡 margin задає відстань від краю елемента до батьківського елемента, а якщо такого немає, то до краю вікна браузера. За замовчуванням вікно браузера має свої відступи всередині; щоб їх позбутися, додай у значення margin : 0 .
На практиці
Скопіювати посилання "На практиці" Скопійовано
Дока Дог радить
Скопіювати посилання "Дока Дог радить" Скопійовано
🛠 margin той ще непередбачуваний біса. Ліворуч і праворуч працює адекватно, навіть у малих елементах.Але варто зробити margin - top - так будь готовий до сюрпризів. Наприклад, всі малі елементи, тобто display : inline , взагалі не врахують твій відступ зверху і знизу. Блокові також можуть спрацювати, а можуть і ні: залежно від батька. Єдине, де margin - top і margin - bottom можна бути впевненим - це в елементах з position : absolute і position : fixed - вже там margin точно не зможе тебе обдурити.
Єгор Левченко радить
Скопіювати посилання "Єгор Левченко радить" Скопійовано
🛠 Щоб спростити роботу, краще використовувати і padding (для внутрішніх відступів всередині блоку), і margin для зовнішніх відступів елемента всередині блоку. Наприклад, якщо у вас вказані коректні padding-відступи, то вам не доведеться використовувати margin-top для відступу від верхнього краю першого елемента.
Після того, як ви задали внутрішні відступи, завжди використовуйте один і той же margin для вертикальних відступів. Відступ зверху через встановлені внутрішні padding -відступи у блоку вам більше не потрібні, тому користуйтесь margin - bottom для відступів між елементами. Ви ж пишете згори донизу, правда? Тоді вам завжди буде зрозуміло, чому той чи інший елемент не там, де вам хочеться.
Звичайно, ніхто не забороняє використовувати і популярне: margin : 0 auto для центрування елемента по рядку.
Олена Батицька радить
Скопіювати посилання "Олена Батицька радить" Скопійовано
🛠 Дуже частий прийом, який використовується у верстці - вирівнювання блокового елемента по центру батька за допомогою margin: 0 auto.
Припустимо, є основна колонка контенту, яка повинна бути по центру вікна браузера. Для цього потрібно обмежити ширину колонки.Наприклад, задати width: 80%. Навіщо? Тому що всі блокові елементи мають ширину 100%. Якщо не буде вільного місця, то відцентрувати елемент не вдасться.
Тепер, коли в елемента з'явилося вільне місце, можна застосувати до нього властивість margin: 0 auto. За рахунок ключового слова auto з обох боків елемента будуть рівні зовнішні відступи, що вирівнюють елемент по центру. У цьому випадку ліворуч і праворуч відступ дорівнюватиме (100% - 80%) / 2 = 10%. Виходить, розмір, що залишився після віднімання ширини елемента 100%, ділиться на 2.
Причому бічні відступи будуть гнучкими. Якщо задати ширину елемента в пікселях, а потім вирівняти за допомогою margin – бічні відступи тягнуться залежно від ширини вікна браузера.
🛠 Розробники-початківці часто зловживають негативними відступами. Це дуже погана практика.
Уяви, що ти робиш перестановку в будинку і вирішуєш поставити обідній стіл на 20 сантиметрів над підлогою і на півметра у стіну. Наскільки це буде логічно та зручно?
Аналогічно з елементами та негативними відступами. Якщо написано негативний відступ, то 98% випадків це привід пошукати помилку у своїй розмітці чи стилях.
Негативний відступ обґрунтований тільки якщо потрібно розмістити один елемент трохи поверх іншого. У цьому випадку так, найпростіший спосіб реалізувати накладення – такий тип відступу. В інших випадках це просто поломка природного потоку документа 🤙🏼
margin
Встановлює величину відступу кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішнього кордону батьківського елемента (рис. 1).
Мал. 1. Відступ від лівого краю елемента
Якщо елемент не має батька, відступом буде відстань від краю елемента до краю вікна браузера з урахуванням того, що у самого вікна за замовчуванням також встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для селектора рівне нулю.
Властивість margin дозволяє встановити величину відступу відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.
Синтаксис
margin: [значення | відсотки | auto] | inherit
Значення
Дозволяється використовувати одне, два, три чи чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень та наведено в табл. 1.
Табл. 1. Залежність від числа значень | Число значень |
Результат |
|---|
| 1 |
Відступи будуть встановлені одночасно від кожного краю елемента. |
| 2 |
Перше значення встановлює відступ від верхнього та нижнього краю, друге – від лівого та правого. |
| 3 |
Перше значення задає відступ від верхнього краю, друге - одночасно від лівого та правого краю, а третє - від нижнього краю. |
| 4 |
Почергово встановлюється відступ від верхнього, правого, нижнього та лівого країв. |
Величину відступів можна вказувати у пікселах (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, і негативним числом.
auto Вказує, що розмір відступів буде автоматично розрахований браузером. inherit Наслідує значення батька.
HTML5 CSS2.1 IE Cr Op Sa Fx
margin
Результат цього прикладу показано на рис. 2.
Мал. 2. Застосування якості margin
Об'єктна модель
[window.]document.getElementById("elementID").style.margin
Браузери
Internet Explorer 6 в режимі сумісності (quirk mode) не підтримує вирівнювання блоку центром за допомогою правила margin: 0 auto . Також у цьому браузері спостерігається помилка із подвоєнням значення лівого чи правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, який прилягає до сторони батька. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Примітка
У блокових елементів розташованих поруч один з одним по вертикалі спостерігається ефект схлопування, коли відступи не підсумовуються, а поєднуються між собою. Саме схлопування діє на два і більше блоки (один може бути вкладений всередину іншого) з відступами зверху або знизу, при цьому відступи, що примикають, комбінуються в один. Для відступів ліворуч і праворуч схлопування ніколи не застосовується.
Схлопування не спрацьовує:
- для елементів, у яких на стороні схлопування встановлено властивість padding .
- для елементів, у яких на стороні схлопування заданий кордон;
- на елементах із абсолютним позиціонуванням, тобто. таких, у яких position встановлено як absolute;
- на плаваючих елементах (для них властивість float задано як left або right);
- для малих елементів;
- для .
