Делаем компоненты универсальными одной строкой!

До сих пор многие привязывают стили к направлению текста:
.card {
padding-left: 16px;
padding-right: 16px;
}

Это работает, пока интерфейс строго LTR и не появляется RTL, локализация или переиспользование компонентов.

Современный CSS решает это нативно, логическими свойствами:
.card {
padding-inline: 16px;
}

padding-inline автоматически учитывает направление текста и заменяет padding-left + padding-right.

То же самое работает для вертикали:
.card {
padding-block: 12px;
}

padding-block — это padding-top + padding-bottom, но без жёсткой привязки к физическим сторонам.

Code Ready | #совет