Два значення у властивості 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: 40px 20px;
}

❗ Важливо:

Два значення margin дозволяють скоротити запис замість використання чотирьох окремих властивостей.

📌 Завдання:

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

Запам'ятайте правило: перше значення відповідає за вертикаль, друге — за горизонталь.

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


#child {
  margin: 40px 20px;
}