Logical Properties

Logical Properties use flow-relative terms (inline/block, start/end) instead of physical directions (left/right, top/bottom), making styles adapt automatically to different writing modes and text directions.

The Old Way

/* Physical properties - tied to physical directions */
.card {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-left: 3px solid blue;
}

/* For RTL support, override everything */
[dir='rtl'] .card {
  margin-left: 0;
  margin-right: 20px;
  margin-left: 20px; /* Wait, this is backwards now */
  border-left: none;
  border-right: 3px solid blue;
}

.tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
}

[dir='rtl'] .tooltip {
  left: auto;
  right: 100%;
}

Problems:

• Physical directions don’t adapt to writing modes
• RTL support requires duplicate rule sets
• Easy to miss properties when adding RTL support
• Vertical writing modes (CJK) require additional overrides
• More CSS to maintain

The Modern Way

/* Logical properties - flow-relative */
.card {
  margin-inline: 20px; /* Left and right in LTR, right and left in RTL */
  padding-block: 16px; /* Top and bottom */
  border-inline-start: 3px solid blue; /* Left in LTR, right in RTL */
}

/* No RTL overrides needed! */

.tooltip {
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;
}

/* Works automatically in RTL */

Benefits:

• Automatically adapts to writing direction
• Single set of rules for LTR and RTL
• Works with vertical writing modes
• Less CSS to maintain
• Fewer bugs in internationalized sites

Property Mapping

Margin and Padding

Physical	Logical
margin-top	margin-block-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin: T R B L	N/A (use individual)
N/A	margin-block: T B
N/A	margin-inline: L R
padding-*	Same pattern

Sizing

Physical	Logical
width	inline-size
height	block-size
min-width	min-inline-size
max-height	max-block-size

Position (Inset)

Physical	Logical
top	inset-block-start
bottom	inset-block-end
left	inset-inline-start
right	inset-inline-end
N/A	inset-block
N/A	inset-inline
N/A	inset (all four)

Border and Border Radius

Physical	Logical
border-top	border-block-start
border-left	border-inline-start
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-bottom-left-radius	border-end-start-radius

Text Alignment

Physical	Logical
text-align: left	text-align: start
text-align: right	text-align: end

Practical Examples

Card Component

.card {
  padding-block: 24px;
  padding-inline: 20px;
  margin-block-end: 16px;
  border-inline-start: 4px solid var(--accent);
}

Modal Positioning

.modal {
  position: fixed;
  inset: 0; /* All four sides */
  /* Or selective */
  inset-block: 20px;
  inset-inline: auto;
  inline-size: min(90%, 500px);
  margin-inline: auto;
}

Floating Sidebar

.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 280px;
}

.main-content {
  margin-inline-start: 280px;
}

Text with Icon

.button-icon {
  margin-inline-end: 8px; /* Space between icon and text */
}

/* Icon on the right */
.button-icon-end {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

Browser Support

Supported in all modern browsers. See caniuse.com/css-logical-props.

Performance Considerations

• No performance difference from physical properties
• Resolved at computed-value time based on writing mode
• Use writing-mode and direction on ancestor elements

When to Use

Use Logical Properties when:

• Building internationalized applications
• Supporting RTL languages (Arabic, Hebrew, etc.)
• Creating reusable component libraries
• Supporting vertical writing modes (Chinese, Japanese, Korean)
• Building any new project (good default choice)

Use Physical Properties when:

• Intentionally positioning relative to the screen (not content flow)
• Working with legacy codebases not being internationalized
• Specific visual effects that shouldn’t flip in RTL