margin-inline: внешние отступы по строчной оси
margin-inline задаёт внешние отступы по началу и концу строчной оси и подходит для направленно независимого оформления.
Назначение
margin-inline задаёт внешние отступы по началу и концу строчной оси и подходит для направленно независимого оформления.
Как это работает
Значения auto у обычного блочного элемента с ограниченной шириной могут распределить свободное место по сторонам. В flex- и grid-контекстах автоматические отступы участвуют в своих правилах раскладки.
Пример
<style>
.card{max-width:24rem;margin-inline:auto;padding:20px;border:1px solid;background:#eaf4ee}
</style>
<div class="card">Блок ограниченной ширины с автоматическими внешними отступами.</div>Что должно получиться
Если контейнер шире карточки, свободное место распределено по бокам. На узком экране карточка занимает доступное пространство, не требуя отрицательных смещений.
Граница применения и частая ошибка
Не ожидайте центрирования блока, который уже занимает всю доступную ширину: свободного места для auto не останется. Сначала ограничьте размер и проверьте модель коробки.
Самостоятельная проверка
Сравните max-width:24rem с width:100%. Затем измените направление письма: симметричное центрирование должно сохраниться без переписывания left и right.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.