margin

CSS-властивість margin використовується для визначення зовнішніх відступів елемента, тобто відстані між його краєм та іншими елементами на сторінці. Властивість margin дозволяє створювати простір навколо елементів, що допомагає формувати макет і керувати відстанями між різними частинами веб-сторінки.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

margin: <length> | <percentage> | auto;

Значення

  • <length> — фіксоване значення відступу в одиницях виміру, таких як px, em, rem тощо.
  • <percentage> — відсоткове значення, яке залежить від розміру батьківського елемента. Наприклад, margin: 10% означає відступ, рівний 10% від ширини батьківського елемента.
  • auto — автоматичний відступ, зазвичай використовується для центрованих елементів по горизонталі в блоці з фіксованою шириною.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • margin працює для всіх блокових елементів, а також інлайн-блоків. Вона визначає зовнішній відступ елемента від інших елементів або від його батьківського контейнера.
  • Властивість margin може задаватися для кожного боку елемента окремо:
    • margin-top — відступ зверху.
    • margin-right — відступ справа.
    • margin-bottom — відступ знизу.
    • margin-left — відступ зліва.
  • Властивість margin може бути задана одним значенням для всіх чотирьох боків, двома значеннями (горизонтальний і вертикальний відступи), трьома або чотирма значеннями для кожного боку:
    • Одне значення: margin: 20px; — однаковий відступ з усіх боків.
    • Два значення: margin: 10px 20px; — перше значення — відступ зверху та знизу, друге — зліва та справа.
    • Три значення: margin: 10px 20px 30px; — перше значення — відступ зверху, друге — зліва та справа, третє — знизу.
    • Чотири значення: margin: 10px 20px 30px 40px; — значення для кожного боку: зверху, справа, знизу, зліва.
  • Властивість margin не впливає на розміри самого елемента, але змінює його позиціонування в макеті.
  • Властивість підтримується всіма сучасними браузерами.