Урок 163 із 239
68%
← Назад

Відступи margin у flex-елементів CSS

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

Відступи margin у flex-елементів CSS

Flex-елементам, як і звичайним блокам, можна задавати зовнішні відступи за допомогою властивості margin.

Margin створює простір між flex-елементами та впливає на їх розташування всередині flex-контейнера.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
.parent {
  display: inline-flex;
  border: 1px solid red;
}

.child {
  margin: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
❗ Важливо:

У flex-контейнері margin може використовуватися не тільки для створення відступів, а й для вирівнювання елементів.

  • margin задає зовнішні відступи flex-елементів.
  • margin впливає на відстань між сусідніми flex-елементами.
  • Можна задавати margin для окремих сторін: margin-left, margin-right, margin-top, margin-bottom.
  • У flexbox значення auto для margin має особливу поведінку.
.child {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
📌 Завдання:
  1. №1. Створіть flex-контейнер із трьома дочірніми елементами.
  2. №2. Додайте дочірнім елементам margin: 20px.
  3. №3. Змініть значення margin і перевірте, як змінюється відстань між елементами.
💡 Показати підказку

Спробуйте використати margin-left або margin-right, щоб змінити відстань тільки з одного боку.

✅ Показати відповідь
.parent {
  display: inline-flex;
  border: 1px solid red;
}

.child {
  margin: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid green;
}