Урок 126 із 239
53%
← Назад

Чотири значення у властивості margin в CSS

Вивчаємо скорочений запис margin із чотирма значеннями для задання різних зовнішніх відступів з усіх сторін елемента.

Чотири значення у властивості margin в CSS

Властивість margin може приймати чотири значення, кожне з яких задає відступ для окремої сторони елемента.

Значення записуються за годинниковою стрілкою: зверху → справа → знизу → зліва.

  • Перше значення — margin-top (верхній відступ).
  • Друге значення — margin-right (правий відступ).
  • Третє значення — margin-bottom (нижній відступ).
  • Четверте значення — margin-left (лівий відступ).

<div id="parent">
  <div id="child"></div>
</div>

#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 10px 20px 30px 40px;
}
❗ Важливо:

Такий запис дозволяє замінити чотири окремі властивості margin-top, margin-right, margin-bottom та margin-left одним рядком.

📌 Завдання:
  1. №1. Створіть блок та задайте йому різні відступи через margin.
  2. №2. Використайте запис margin з чотирма значеннями.
  3. №3. Поміняйте місцями значення та перевірте, як зміниться положення елемента.
💡 Показати підказку

Запам'ятайте порядок: верх → право → низ → ліво. Це такий самий напрямок, як рух стрілки годинника.

✅ Показати відповідь

#child {
  margin: 10px 20px 30px 40px;
}