Урок 124 із 239
52%
← Назад

Робота з відступами margin в CSS

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

Робота з відступами margin в CSS

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

За допомогою 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 зі значенням 30px.


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

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

margin створює зовнішній відступ за межами елемента, а padding створює внутрішній відступ між вмістом та границею.

  • margin-top — верхній зовнішній відступ.
  • margin-right — правий зовнішній відступ.
  • margin-bottom — нижній зовнішній відступ.
  • margin-left — лівий зовнішній відступ.
📌 Завдання:
  1. №1. Створіть два вкладені блоки.
  2. №2. Додайте внутрішньому блоку margin: 30px.
  3. №3. Змініть значення margin та спостерігайте за результатом.
💡 Показати підказку

Спробуйте значення 10px, 20px, 50px та подивіться, як змінюється відстань між елементами.

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

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}