Learn CSS logical properties that adapt to different writing modes and text directions, replacing physical properties like margin-left with flow-relative alternatives like margin-inline-start.
Traditional CSS properties like margin-left, padding-right, width, and height are physical — they always refer to the same physical direction on the screen regardless of language or writing mode.
Logical properties replace physical directions with flow-relative ones:
| Physical | Logical (horizontal writing) | Meaning |
|---|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end | Along the inline (text) axis |
margin-top / margin-bottom | margin-block-start / margin-block-end | Along the block (stacking) axis |
padding-left / padding-right | padding-inline-start / padding-inline-end | Inline axis padding |
width | inline-size | Size along the inline axis |
height | block-size | Size along the block axis |
In a left-to-right language (like English), margin-inline-start equals margin-left. But in a right-to-left language (like Arabic), it automatically becomes margin-right. This makes your CSS internationalization-ready without duplicating rules.
Logical properties have convenient shorthands:
margin-inline — Sets both margin-inline-start and margin-inline-end at once. With two values, the first is start and the second is end.
.box { margin-inline: 20px 10px; }margin-block — Sets both margin-block-start and margin-block-end.
.box { margin-block: 16px; } /* same as top and bottom */padding-inline and padding-block — Same pattern for padding.
inset-inline and inset-block — Logical equivalents of left/right and top/bottom for positioned elements.
border-inline and border-block — Set borders on logical axes.
The writing-mode property changes how block and inline axes are oriented:
horizontal-tb — Default. Inline is horizontal (left to right), block is vertical (top to bottom).vertical-rl — Inline is vertical (top to bottom), block is horizontal (right to left).vertical-lr — Inline is vertical, block is horizontal (left to right).Logical properties automatically adapt to any writing mode.
<style>
.card {
/* Logical sizing */
inline-size: 300px;
block-size: auto;
/* Logical padding */
padding-block: 16px;
padding-inline: 24px;
/* Logical margin — auto centers horizontally */
margin-inline: auto;
margin-block: 20px;
/* Logical border */
border-inline-start: 4px solid blue;
background-color: #f8f8f8;
}
.card p {
/* Logical margin for paragraph spacing */
margin-block-end: 12px;
}
</style>
<div class="card">
<h3>Logical Properties</h3>
<p>This card uses logical properties throughout.</p>
<p>It will adapt if the writing direction changes.</p>
</div>In a right-to-left (RTL) language, what physical direction does `margin-inline-start` correspond to?