Практичне завдання: прокоментувати та виправити приклад поганого CSS або HTML.

Повне пояснення

Що це і навіщо. У CSS margin: 0 auto; використовується для горизонтального центрування блоку, коли задана ширина. Якщо блок не має display: block; або width, правило не застосовується.

Ключові принципи. Блоковий елемент повинен мати фіксовану ширину і бути блочним (або display: inline-block;). Тоді автоматичні зовнішні відступи працюють.

Як це працює. Браузер розраховує ширину елемента, а потім встановлює зовнішні відступи рівними, щоб залишити вільний простір по обидва боки.

Практика і реалізація.

.block {
  display: block; /* або inline-block */
  width: 300px;
  margin: 0 auto; /* центрування */
}

Тестування. Перевірити в DevTools, що margin-left і margin-right рівні.

Оптимізація. Для адаптивного дизайну можна використовувати max-width і width: 100%;.

Accessibility. Центрування не впливає на доступність, але слід уникати абсолютного позиціювання без aria.

Безпека. Немає прямого впливу на безпеку.

Типові помилки й edge cases.

• Забуті display або width.
• Використання margin: auto; без конкретної ширини.
• Блок всередині flex контейнера, де margin: auto; працює інакше.

Cheatsheet.

• margin: 0 auto; – центрування блоку.
• display:block; width:100%; max-width:600px; – адаптивний центрований блок.