🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Почему блок не центрируется и как освободить место для отступов
Вы добавили автоматические отступы, а блок остался на месте. Обычно он уже занимает всю доступную ширину, поэтому свободного места по бокам нет. Сначала ограничьте его размер:
.element {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
Значение fit-content не даёт блоку стать шире содержимого. Затем автоматические отступы занимают свободное место слева и справа, и блок оказывается по центру.
В гайде Josh W. Comeau этот приём показан с изменяемой шириной контейнера. Повторите опыт: сузьте контейнер и сравните max-width: fit-content с фиксированной шириной width: 200px. В первом случае блок сможет сжаться, во втором может выйти за границы контейнера.