CSS logical properties

What are CSS Logical Properties?

CSS Logical Properties replace physical direction-based properties (left, right, top, bottom) with flow-relative alternatives that adapt to different writing modes and text directions (LTR, RTL, vertical text).

Why Logical Properties?

In left-to-right (LTR) languages like English, margin-left adds space at the start. But in right-to-left (RTL) languages like Arabic, the start is on the right side. Logical properties handle this automatically.

Physical vs Logical Mapping

Physical	Logical (Horizontal writing)	Concept
`margin-left`	`margin-inline-start`	Start of text direction
`margin-right`	`margin-inline-end`	End of text direction
`margin-top`	`margin-block-start`	Start of block flow
`margin-bottom`	`margin-block-end`	End of block flow
`padding-left`	`padding-inline-start`	—
`padding-right`	`padding-inline-end`	—
`width`	`inline-size`	Size in inline direction
`height`	`block-size`	Size in block direction
`border-left`	`border-inline-start`	—
`border-right`	`border-inline-end`	—
`left`	`inset-inline-start`	—
`right`	`inset-inline-end`	—
`top`	`inset-block-start`	—
`bottom`	`inset-block-end`	—

Shorthand Properties

css

.element {
  /* Block (top + bottom) and Inline (left + right) */
  margin-block: 1rem 2rem;    /* block-start block-end */
  margin-inline: 1rem 2rem;   /* inline-start inline-end */
  padding-block: 1rem;        /* Same for both */
  padding-inline: 2rem;       /* Same for both */
  
  /* Size */
  inline-size: 300px;  /* width in LTR */
  block-size: 200px;   /* height in LTR */
  
  /* Inset (positioning) */
  inset-block: 0;      /* top: 0; bottom: 0; */
  inset-inline: 0;     /* left: 0; right: 0; */
  inset: 0;            /* All four directions */
}

Practical Example: RTL Support

css

/* ❌ Physical — breaks in RTL */
.icon {
  margin-right: 8px;
}

/* ✅ Logical — works in LTR and RTL */
.icon {
  margin-inline-end: 8px;
}

css

/* ❌ Physical — needs duplicate rule for RTL */
.sidebar {
  border-left: 2px solid #ccc;
}
[dir="rtl"] .sidebar {
  border-left: none;
  border-right: 2px solid #ccc;
}

/* ✅ Logical — one rule for all directions */
.sidebar {
  border-inline-start: 2px solid #ccc;
}

Logical Values for text-align and float

css

.text {
  text-align: start; /* Instead of 'left' */
  text-align: end;   /* Instead of 'right' */
}

.image {
  float: inline-start; /* Instead of 'left' */
}

border-radius Logical Properties

css

.card {
  border-start-start-radius: 8px; /* top-left in LTR */
  border-start-end-radius: 8px;   /* top-right in LTR */
  border-end-start-radius: 8px;   /* bottom-left in LTR */
  border-end-end-radius: 8px;     /* bottom-right in LTR */
}

Important:

CSS Logical Properties are the future of CSS layout and essential for internationalization. They're supported in all modern browsers. Start using them in new projects, especially if your application needs to support RTL languages or vertical writing modes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

CSS logical properties

#What are CSS Logical Properties?

#Why Logical Properties?

#Physical vs Logical Mapping

#Shorthand Properties

#Practical Example: RTL Support

#Logical Values for text-align and float

#border-radius Logical Properties