Logical Properties

CSS logical properties describe spacing and sizing in terms of the content's flow direction — using terms like margin-inline and padding-block instead of left/right/top/bottom — so one stylesheet adapts automatically to left-to-right, right-to-left, and vertical writing modes.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll be able to write one set of spacing, border, and alignment rules that lays out correctly in English, Arabic, and vertical Japanese — no right-to-left overrides, no duplicated stylesheets.

Physical properties are like telling someone "the light switch is on the left wall." That only works if they walk in facing the way you imagined. Turn them around — or stand them in a different room — and "left" now points at the wrong wall.

Logical properties are like saying "the switch is by the door you came in through." That instruction stays correct no matter which way the person faces. When you write margin-inline-start instead of margin-left , you're describing the side relative to how the text flows , so the browser points it at the right wall automatically — in English, in Arabic, or in vertical Japanese.

Every logical property is named after one of two axes. The inline axis runs along the direction text flows — across the line. The block axis is perpendicular to it — the way new lines and paragraphs stack. Each axis has a start and an end , so every physical edge gets a flow-relative name.

In English (left-to-right), the inline axis is horizontal: inline-start = left, inline-end = right. The block axis is vertical: block-start = top, block-end = bottom. Change the language to Arabic and only the inline side flips; switch to vertical Japanese and the two axes rotate together. You write the names once and the browser resolves the physical edge at render time.

Run the worked example. The blue accent bar is on border-inline-start . The second card uses the identical CSS but sits in a direction: rtl container — and the bar moves to the other side by itself.

Just like margin: 10px 20px is shorthand for the four physical sides, logical properties have per-axis shorthands. margin-inline sets both inline edges at once; margin-block sets both block edges. Give two values to set start and end separately: padding-block: 12px 20px is 12px on top, 20px on the bottom (in LTR).

The axes also rename width and height . inline-size is the measurement along the inline axis (width in normal text) and block-size is along the block axis (height). In a vertical writing mode these swap, which is exactly what you want — a "300px wide" column should stay 300px across the reading direction , not 300px across the screen.

For positioned elements, inset is the logical shorthand for the offset edges. inset: 0 pins all four sides (handy for a full-cover overlay), inset-inline targets the two inline edges, and inset-inline-start replaces left in LTR / right in RTL.

The smallest, highest-value swap is alignment. Replace text-align: left with text-align: start and your paragraphs align to the reading direction — left in English, right in Arabic — with no override. Pair it with direction (rtl/ltr) or writing-mode (e.g. vertical-rl for vertical CJK text) and the whole layout follows.

The example shows the same CSS rendered three ways: horizontal LTR, horizontal RTL, and vertical. Notice the accent bar and the text alignment land on the correct edge in every panel without a single direction-specific rule.

This card is styled with physical properties, so its accent bar stays on the left even in the RTL container below it. Swap the three marked lines to logical properties so the bar flips automatically. Fill in the blanks marked ___ , then run it.

The heading should align to the reading direction, and the badge should sit in the inline-end / block-start corner so it lands top-right in English but top-left in RTL. Fill in the two blanks, then check the expected result in the comments.

Support is faded now — only an outline is given. Build a notification card that lays out correctly in both LTR and RTL using only logical properties. Use the worked examples in sections 1–4 as your reference if you get stuck.

You can now write CSS that lays out correctly in any writing direction. The essentials:

Next up: Responsive Without Frameworks , where you'll build fluid layouts using modern CSS instead of a UI library.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary