Логические CSS-свойства для RTL в Elementor: отступы без отдельных правил

Чем физические свойства отличаются от логических

В традиционном CSS отступ слева задают с помощью margin-left или padding-left. В RTL это может быть не та сторона, которую пользователь воспринимает как начало строки. Логические свойства учитывают направление: в LTR inline-start соответствует левой стороне, а в RTL — правой.

Свойство inline описывает горизонтальное направление текста, а block — направление размещения блоков. Поэтому padding-inline соответствует горизонтальным внутренним отступам, а padding-block — вертикальным.

• margin-inline — горизонтальные внешние отступы с обеих сторон.
• padding-inline — горизонтальные внутренние отступы с обеих сторон.
• margin-inline-start — отступ в начале строки.
• margin-inline-end — отступ в конце строки.
• padding-block — вертикальные внутренние отступы.
• inset-inline-start — позиционирование от начала строки для элементов с position.

.content-block {
  padding-inline: 24px;
  margin-inline: auto;
}

Как добавить логические свойства в Elementor

Сначала выберите контейнер или виджет, к которому нужно применить правило. В его настройках добавьте CSS-класс, например content-block, без точки. Точка используется уже в CSS-селекторе.

CSS можно добавить через Custom CSS, если такая возможность доступна в вашей конфигурации Elementor, либо через общие стили темы или WordPress. Важно размещать правило там, где оно будет загружаться для нужных страниц и не будет случайно ограничено только редактором.

После сохранения откройте страницу в обычном режиме, а не только в редакторе Elementor. Проверьте, присутствует ли класс в HTML и не перекрывается ли правило стилями виджета, темы или адаптивными настройками.

• В поле классов Elementor указывайте content-block, а не .content-block.
• Один класс можно использовать для группы однотипных блоков.
• Для одного исключительного элемента лучше использовать отдельный класс, а не изменять общее правило.
• После изменений очистите кеш плагина кеширования, CDN или браузера, если продолжают отображаться старые стили.

.content-block {
  padding-inline: 24px;
  margin-inline: auto;
}

Точечные отступы для начала и конца строки

Когда одинаковый отступ слева и справа не подходит, используйте inline-start и inline-end. Это полезно для карточек, иконок, декоративных элементов и текстовых блоков, которые должны смещаться вместе с направлением письма.

Например, в LTR margin-inline-start: 40px создаст отступ слева. В RTL та же запись создаст отступ справа. Отдельные правила для арабской версии не нужны, если направление RTL корректно задано на странице или контейнере.

• inline-start — начало строки: слева в LTR и справа в RTL.
• inline-end — конец строки: справа в LTR и слева в RTL.
• block-start и block-end связаны с вертикальным направлением, а не с левой или правой стороной.
• Логические свойства не задают направление самостоятельно — они лишь реагируют на уже установленное direction.

.content-block {
  margin-inline-start: 40px;
  padding-inline-end: 16px;
}

Примеры для типичных элементов Elementor

Логические свойства удобно применять к секциям, контейнерам, кнопкам, карточкам и декоративным элементам. Они особенно полезны там, где элемент имеет визуальную связь с началом или концом текстовой строки.

Для кнопки с иконкой можно задать промежуток и внутренние отступы без привязки к левой или правой стороне. Если иконка или ее положение меняются в RTL отдельным правилом, проверьте, не дублирует ли это логику flex-контейнера.

• Для контентной области: padding-inline и margin-inline.
• Для бейджа или декоративной линии: inset-inline-start или inset-inline-end.
• Для рамки с одной стороны: border-inline-start или border-inline-end.
• Для скругления углов: border-start-start-radius и другие логические варианты, если дизайн должен зависеть от направления.
• Для фиксированного элемента: inset-inline-start вместо left, а inset-inline-end вместо right.

.icon-label {
  padding-inline-start: 12px;
  border-inline-start: 3px solid #2f6fed;
}

.badge {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 16px;
}

Как правильно настроить и проверить направление RTL

Логические свойства работают корректно только тогда, когда браузер знает направление текста. Для арабской версии обычно должно быть задано direction: rtl на уровне HTML-документа или соответствующего языкового контейнера. Для украинской и английской версий используется direction: ltr.

Не стоит принудительно устанавливать direction: rtl для каждого виджета. Это может изменить выравнивание текста, порядок flex-элементов и поведение вложенных компонентов. Лучше задавать направление на уровне страницы, языковой версии или крупного контейнера, а локальные исключения создавать только при необходимости.

• Проверьте страницу в направлениях LTR и RTL, а не только в одном из них.
• Отдельно протестируйте мобильную, планшетную и десктопную ширину.
• Проверьте меню, карточки, кнопки, слайдеры, формы и блоки с position: absolute.
• В DevTools просмотрите вычисленные значения margin и padding и убедитесь, что нужное правило не перекрыто.
• Проверьте длинные арабские заголовки и тексты: они могут изменить высоту блоков даже при правильных отступах.

[dir="rtl"] .content-block {
  /* Добавляйте этот блок только для исключений,
     если логических свойств недостаточно */
}

[dir="ltr"] {
  direction: ltr;
}

[dir="rtl"] {
  direction: rtl;
}

Распространенные ошибки и ограничения

Самая частая ошибка — смешивание физических и логических свойств в одном компоненте. Например, padding-inline-start может быть перекрыт последующим padding-left или адаптивным правилом Elementor. Выберите единый подход для конкретного компонента и проверьте порядок загрузки стилей.

Еще одна проблема возникает, когда direction меняют на дочернем элементе, но ожидают, что весь макет автоматически перестроится. Направление текста, порядок flex-элементов и расположение абсолютно позиционированных элементов могут потребовать отдельной проверки.

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

• Не ставьте точку перед названием класса в поле Elementor.
• Не используйте margin-inline: auto, если элемент не имеет ограниченной ширины или не должен центрироваться.
• Не путайте padding-inline с padding-block: первое свойство изменяет горизонтальные, а второе — вертикальные отступы.
• Не дублируйте одинаковые правила для LTR и RTL без необходимости.
• Не считайте, что правильные отступы автоматически исправят порядок элементов в сложном flex- или grid-макете.

.content-block {
  margin-inline: auto;
  max-inline-size: 960px;
  padding-inline: 24px;
  padding-block: 32px;
}