Відступи margin для різних сторін в CSS

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

Відступи margin для різних сторін в CSS

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

Якщо потрібно задати різні відступи для кожної сторони, використовуються окремі властивості: margin-top, margin-right, margin-bottom та margin-left.

margin-top — відступ зверху.
margin-right — відступ справа.
margin-bottom — відступ знизу.
margin-left — відступ зліва.


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


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

#child {
  margin-top: 10px; /* зверху */
  margin-right: 20px; /* справа */
  margin-bottom: 30px; /* знизу */
  margin-left: 40px; /* зліва */

  height: 100px;
  border: 1px solid green;
}

❗ Важливо:

Окремі властивості margin дозволяють точно керувати положенням елементів на сторінці.

📌 Завдання:

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

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

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

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


#child {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;

  height: 100px;
  border: 1px solid green;
}