Вирівнювання блочного елемента з відступом справа в CSS

Вивчаємо, як поєднання margin-left: auto та margin-right дозволяє розташувати блочний елемент із заданим правим відступом.

Вирівнювання блочного елемента з відступом справа в CSS

Значення auto для margin дозволяє браузеру автоматично розподілити вільний простір.

Якщо задати margin-left: auto, елемент переміститься праворуч. Додавши margin-right із конкретним значенням, можна створити відступ від правого краю.

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

.parent {
  padding: 10px 0;
  border: 1px solid red;
}

.child {
  margin-left: auto;
  margin-right: 20px;
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

❗ Важливо:

Щоб margin-left: auto працював, елемент повинен бути блочним і мати задану ширину.

margin-left: auto — займає весь вільний простір зліва.
margin-right: 20px — створює фіксований відступ справа.
Елемент притискається до правої сторони з урахуванням заданого відступу.
Такий спосіб часто використовують для вирівнювання блоків у макетах.

📌 Завдання:

№1. Створіть батьківський блок із границею.
№2. Додайте дочірній блок шириною 200px.
№3. Вирівняйте його праворуч за допомогою margin-left: auto.
№4. Додайте правий відступ 20px.

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

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

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

.child {
  margin-left: auto;
  margin-right: 20px;
  height: 100px;
  width: 200px;
  border: 1px solid green;
}