🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2024-03-20

CSS логические свойства позволяют управлять отступами, границами, размерами элементов, исходя из направления текста (например, слева направо или сверху вниз). Это удобно, если сайт должен корректно отображаться на языках с разной записью — например, на арабском или японском. Вместо фиксированных margin-left, padding-top используют свойства типа margin-start, padding-end, которые автоматически меняются при изменении направления письма.

Пример использования:

.element {
  margin-block-start: 10px; /* сверху в вертикальной ориентации */
  margin-inline-end: 20px; /* справа в горизонтальной ориентации LTR */
  border-block-end: 2px solid black; /* нижняя граница в вертикальной ориентации */
}

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.