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

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

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

Перше значення задає верхній відступ, друге — одночасно лівий і правий, третє — нижній відступ.


<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;
}

❗ Важливо:

Три значення margin — це скорочений запис замість чотирьох окремих властивостей.

📌 Завдання:

💡 Показати підказку

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

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


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