CSS margin, приклади

Властивість CSS margin відповідає за завдання зовнішніх відступів елемента з інших об'єктів.

Синтаксис CSS margin

  • top - відступ зверху з інших елементів;
  • right – відступ праворуч від інших елементів;
  • bottom – відступ знизу від інших елементів;
  • left - відступ зліва від інших елементів;

приклади

Значення найчастіше задаються у пікселях. Дозволяється також завдання у вигляді відсотків та інших допустимих одиниць CSS.

Дозволяється завдання не чотирьох значень. Залежно від кількості значень дії будуть різні:

  • Якщо задано 3 значення, то перше значення встановлює відступ зверху, друге одночасно ліворуч і праворуч, а третє знизу
  • Якщо задано 2 значення, то перше значення встановлює відступ зверху та знизу, друге – ліворуч та праворуч від вмісту
  • Якщо встановлено 1 значення, то відступ задається однаковий відступ для всіх сторін. Наприклад:
Примітка 2

На відміну від якості CSS padding, margin припускає негативні значення.

Також margin має 4 окремі властивості CSS. Кожна з них відповідає за якийсь напрямок.

  • margin-left – відступ від лівої межі елемента;
  • margin-right - відступ від правого кордону елемента;
  • margin-top – відступ від верхньої межі елемента;
  • margin-bottom – відступ від лівої межі елемента;

Властивість CSS margin використовується майже завжди. Відступи грають найважливішу роль оформленні html сторінки. Наведемо приклади