padding-inline: внутренние отступы по направлению строки
padding-inline задаёт внутренние отступы по началу и концу строчной оси, учитывая направление письма.
Назначение
padding-inline задаёт внутренние отступы по началу и концу строчной оси, учитывая направление письма.
Как это работает
Одно значение применяется к обеим сторонам, два задают начало и конец. При обычном горизонтальном письме ось соответствует горизонтали, но в вертикальном writing-mode соответствие меняется.
Пример
<style>
.panel{padding-block:12px;padding-inline:32px 8px;border:1px solid;background:#eaf4ee;margin-block:8px}
</style>
<div class="panel" dir="ltr">Начало слева</div><div class="panel" dir="rtl">Начало справа</div>Что должно получиться
Больший отступ находится у начала строки в каждом направлении. Внутреннее расстояние следует смысловой оси, а не постоянно привязано к левой стороне экрана.
Граница применения и частая ошибка
Не смешивайте физические padding-left и логические свойства без ясного порядка переопределения. При смене направления можно получить результат, который трудно объяснить по одному правилу.
Самостоятельная проверка
Сравните один блок с dir=ltr и другой с dir=rtl. Задайте разный начальный и конечный отступ и посмотрите, как они меняются сторонами.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.