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

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

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

Коли для лівого і правого відступу встановлено auto, елемент вирівнюється по центру.

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

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

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

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

• margin: 0 auto — центрує блочний елемент по горизонталі.
• margin-left: auto — переміщує елемент праворуч.
• margin-right: auto — переміщує елемент ліворуч.
• auto займає весь доступний вільний простір.

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