CSS Logical Properties – Interactive Guide & Examples

What are CSS Logical Properties?

Logical properties are CSS properties that describe layout in a way that adapts to the writing mode, direction, and orientation of the document. Instead of using physical directions like top, right, bottom, and left, logical properties use block and inline axes, making your CSS more robust for internationalization and vertical writing modes.

Block axis: The direction in which blocks are stacked (usually top-to-bottom).
Inline axis: The direction in which text flows (usually left-to-right).
Examples: margin-block-start, padding-inline-end, border-block, inset-inline, etc.
Why use them? Logical properties make layouts more adaptable to different languages and writing directions (LTR, RTL, vertical, etc.).

Interactive Examples

Physical vs Logical Margin

Physical: margin-top

Logical: margin-block-start

.physical-margin {
  margin-top: 2rem;
}
.logical-margin {
  margin-block-start: 2rem;
}

Padding Inline/Block

Padding: padding-inline & padding-block

.padding-logical {
  padding-inline: 2rem;
  padding-block: 1rem;
}

Border Inline/Block

Border: border-inline & border-block

.border-logical {
  border-inline: 4px solid #4f8cff;
  border-block: 2px dashed #ffb347;
}

Inset Logical

inset-inline-end: 0.5rem;
inset-block-start: 1rem;

.demo-inset {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 1rem;
}