What Are Logical Properties?

Traditional CSS uses physical properties like margin-left, padding-right, border-top, and width. These are tied to the physical screen — left is always left, top is always top.

Logical properties replace these with direction-aware alternatives that adapt to the document's writing mode and text direction. Instead of left/right/top/bottom, they use inline (text flow direction) and block (perpendicular to text flow).

Why Logical Properties Matter

In English (left-to-right), margin-left adds space before content. But in Arabic or Hebrew (right-to-left), the "before" direction is the right side. Logical properties handle this automatically:

CSS

/* Physical: Always on the left, regardless of language */
.element { margin-left: 1rem; }

/* Logical: On the "start" side (left in LTR, right in RTL) */
.element { margin-inline-start: 1rem; }

The Inline and Block Axes

Inline axis: The direction text flows (horizontal in English, vertical in some CJK writing modes)
Block axis: Perpendicular to inline (vertical in English)

For English (horizontal, left-to-right):

inline-start = left
inline-end = right
block-start = top
block-end = bottom

Logical Margin Properties

CSS

/* Physical (old way) */
margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 1rem;
margin-left: 2rem;

/* Logical (new way) */
margin-block-start: 1rem;   /* top in LTR horizontal */
margin-inline-end: 2rem;    /* right in LTR */
margin-block-end: 1rem;     /* bottom in LTR horizontal */
margin-inline-start: 2rem;  /* left in LTR */

/* Shorthand */
margin-block: 1rem;         /* block-start and block-end */
margin-inline: 2rem;        /* inline-start and inline-end */

/* Different values */
margin-block: 1rem 2rem;    /* block-start block-end */
margin-inline: 1rem 2rem;   /* inline-start inline-end */

Logical Padding Properties

CSS

/* Physical */
padding-top: 1rem;
padding-right: 1.5rem;
padding-bottom: 1rem;
padding-left: 1.5rem;

/* Logical */
padding-block-start: 1rem;
padding-inline-end: 1.5rem;
padding-block-end: 1rem;
padding-inline-start: 1.5rem;

/* Shorthand */
padding-block: 1rem;
padding-inline: 1.5rem;

Logical Border Properties

CSS

/* Physical */
border-top: 2px solid #333;
border-left: 4px solid #3498db;

/* Logical */
border-block-start: 2px solid #333;
border-inline-start: 4px solid #3498db;

/* Border radius */
/* Physical */
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;

/* Logical */
border-start-start-radius: 8px;
border-end-end-radius: 8px;

Logical Sizing Properties

CSS

/* Physical */
width: 300px;
height: 200px;
min-width: 100px;
max-height: 500px;

/* Logical */
inline-size: 300px;      /* width in horizontal mode */
block-size: 200px;       /* height in horizontal mode */
min-inline-size: 100px;  /* min-width */
max-block-size: 500px;   /* max-height */

Logical Position Properties

CSS

/* Physical */
top: 0;
right: 0;
bottom: 0;
left: 0;

/* Logical */
inset-block-start: 0;    /* top */
inset-inline-end: 0;     /* right in LTR */
inset-block-end: 0;      /* bottom */
inset-inline-start: 0;   /* left in LTR */

/* Shorthand */
inset-block: 0;           /* top and bottom */
inset-inline: 0;          /* left and right */
inset: 0;                 /* all four sides */

The inset Shorthand

inset replaces setting all four physical position properties:

CSS

/* Physical */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Logical shorthand */
.overlay {
  position: absolute;
  inset: 0;
}

/* Different values: block-start inline-end block-end inline-start */
.element {
  inset: 10px 20px 10px 20px;
}

Logical Text Alignment

CSS

/* Physical */
text-align: left;
text-align: right;

/* Logical */
text-align: start;  /* left in LTR, right in RTL */
text-align: end;    /* right in LTR, left in RTL */

Logical Float and Clear

CSS

/* Physical */
float: left;
clear: right;

/* Logical */
float: inline-start;
clear: inline-end;

Practical Examples

Card Component

CSS

.card {
  padding-block: 1.5rem;
  padding-inline: 2rem;
  margin-block-end: 1.5rem;
  border-inline-start: 4px solid #3498db;
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}

CSS

.nav-item {
  padding-block: 0.5rem;
  padding-inline: 1rem;
  margin-inline-end: 0.5rem;
  border-block-end: 2px solid transparent;
}

.nav-item.active {
  border-block-end-color: #3498db;
}

CSS

.sidebar {
  inline-size: 280px;
  padding-inline: 1.5rem;
  border-inline-end: 1px solid #eee;
}

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

Quick Reference

| Physical | Logical |

|----------|---------|

| margin-left | margin-inline-start |

| margin-right | margin-inline-end |

| margin-top | margin-block-start |

| margin-bottom | margin-block-end |

| width | inline-size |

| height | block-size |

| top | inset-block-start |

| left | inset-inline-start |

| border-left | border-inline-start |

| text-align: left | text-align: start |

Summary

CSS logical properties replace physical direction properties with writing-mode-aware alternatives. Use inline for the text-flow axis and block for the perpendicular axis. Properties like margin-inline-start, padding-block, inline-size, and inset automatically adapt to different writing directions (LTR, RTL) and writing modes (horizontal, vertical). Logical properties are the future of CSS layout and essential for building truly internationalized websites.

CSS Logical Properties: Writing Direction-Aware Layouts