Логические свойства

При работе над многоязычными сайтами нам необходимо поддерживать макеты как слева направо, так и справа налево (right-to-left, RTL).

Рассмотрим следующий пример.

У нас есть компонент со следующими параметрами:

• padding (слева и справа);
• граница с левой стороны;
• margin для иконки.

С помощью логических свойств CSS мы можем написать стиль один раз и он будет адаптироваться к предпочитаемому пользователем языку.

.card {
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

.card__icon {
  margin-inline-end: 1rem;
}

Подробнее о логических свойствах CSS вы можете узнать из моей статьи, а также из моего подробного руководства по написанию CSS для RTL-сайтов.