Layout

Logical properties

Widely availablesince Mar 2024

Replaces: margin-left and padding-right, which are wrong the moment a layout runs right to left. inline and block follow the writing mode.

See it working

Left to right: the accent bar is at the start of the line.

من اليمين إلى اليسار: الشريط في بداية السطر أيضًا.

The syntax

.note {
  border-inline-start: 4px solid;
  padding-inline: 16px;
  margin-block: 12px;
}

The demo’s full CSS

.dm-lp { display: grid; gap: 10px; }
.dm-lp-note { margin: 0; padding-block: 12px; padding-inline: 16px;
  border-inline-start: 4px solid #f05a28; border-radius: 8px;
  background: #fff; font-size: 14px; line-height: 1.5; color: #1c1f2a; }

For browsers without it

No fallback is needed for current browsers. The same rule styled both paragraphs above: one declaration, two writing directions, and the bar moved by itself.