↔️ Адаптивные отступы для любого языка
Вместо физических направлений left, right, top и bottom в CSS можно использовать логические свойства.
Горизонтальные отступы:
.card {
margin-inline: auto;
padding-inline: 24px;
}
Вертикальные отступы:
.card {
margin-block: 32px;
padding-block: 16px;
}
Также доступны отдельные стороны:
.card {
margin-inline-start: 20px;
padding-block-end: 24px;
}
Главное преимущество — браузер учитывает направление текста.
В интерфейсе LTR начало строки находится слева, а в RTL — справа. Поэтому макет автоматически адаптируется под нужный язык.
#css #frontend #локализация
Вместо физических направлений left, right, top и bottom в CSS можно использовать логические свойства.
Горизонтальные отступы:
.card {
margin-inline: auto;
padding-inline: 24px;
}
Вертикальные отступы:
.card {
margin-block: 32px;
padding-block: 16px;
}
Также доступны отдельные стороны:
.card {
margin-inline-start: 20px;
padding-block-end: 24px;
}
Главное преимущество — браузер учитывает направление текста.
В интерфейсе LTR начало строки находится слева, а в RTL — справа. Поэтому макет автоматически адаптируется под нужный язык.
#css #frontend #локализация