CSS Logical Properties: A Guide to Writing Direction-Aware Styles

CSS logical properties describe layout relative to an element’s writing flow. For example, margin-inline-start puts space at the start of the text line: on the left in horizontal left-to-right (LTR), on the right in horizontal right-to-left (RTL), and potentially at the top in vertical writing.

Use logical properties when a style should follow the content’s writing mode and direction. Keep physical properties such as left, width, and margin-left when the design is deliberately tied to a physical screen edge or dimension.

1. What are CSS logical properties?

Physical CSS properties name physical edges or dimensions: left, top, width, and height. Logical properties name positions and dimensions in the content flow: inline-start, inline-end, block-start, block-end, inline-size, and block-size.

The inline axis runs along a line of text. The block axis runs in the direction blocks stack, perpendicular to the inline axis. Neither axis is inherently horizontal or vertical. In common horizontal writing, inline is horizontal and block is vertical; vertical writing changes their physical orientation. [MDN: Basic concepts]

How do CSS logical properties work with RTL?

In horizontal RTL text, inline-start is on the right and inline-end is on the left. Block-start remains at the top in the usual horizontal writing mode. A declaration such as margin-inline-start: 1rem therefore follows the start of the line as direction changes; it does not always mean “left margin.”

The mapping comes from the writing context. The CSS writing-mode model involves writing-mode, direction, and text-orientation. direction sets the inline base direction, writing-mode determines block flow, and text-orientation affects glyph orientation. Logical properties alone do not handle every bidirectional text-ordering concern; use suitable document markup and direction semantics too. [W3C CSS Writing Modes]

2. Think in axes, not left and top

For horizontal LTR, inline-start is left and block-start is top. For horizontal RTL, inline-start is right while block-start is still top. In vertical writing, inline is vertical and block is horizontal, so an inline-start margin can map to the top edge. The precise mapping depends on the writing mode and direction; reason from the element’s axes rather than memorizing a universal side. [MDN: Margins, borders, and padding]

Flow-relative intent	Horizontal LTR	Horizontal RTL
Inline start	Left	Right
Inline end	Right	Left
Block start	Top	Top
Block end	Bottom	Bottom
Inline size	Extent along the horizontal text line	Extent along the horizontal text line
Block size	Extent perpendicular to the text line	Extent perpendicular to the text line

In vertical writing, the inline axis is vertical and the block axis horizontal. Which physical side corresponds to start depends on the writing mode and direction.

3. Common physical-to-logical mappings

Physical property	Logical counterpart	Use the logical form when…
margin-left, margin-right	margin-inline-start, margin-inline-end	Spacing follows the text line.
margin-top, margin-bottom	margin-block-start, margin-block-end	Spacing follows block progression.
padding-left, padding-right	padding-inline-start, padding-inline-end	Inner spacing belongs at a line-relative edge.
width, height	inline-size, block-size	A dimension should follow an axis across writing modes.
left, right, top, bottom	inset-inline-start/end, inset-block-start/end	Positioning follows content flow.
border-left, border-right	border-inline-start, border-inline-end	A border marks a line-relative edge.

Logical properties also cover border radii, float and clear values, and alignment values such as start and end. Choose the property family that matches the intended relationship, not simply a text replacement for the word “left.” [MDN: CSS logical properties and values]

4. Write a flow-aware component

.card {
  inline-size: min(100%, 42rem);
  padding-block: 1rem;
  padding-inline: 1.25rem;
  margin-inline: auto;
  border-inline-start: 0.25rem solid currentColor;
}

.card__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

The card’s maximum extent follows the inline axis. Its padding is defined separately for the block and inline axes, and the border sits at inline-start. In horizontal LTR the border is on the left; in horizontal RTL it moves to the right. The badge is inset from block-start and inline-end, so those offsets follow the writing context too. This illustrates the syntax; adapt positioning and containing blocks to the component’s actual layout.

Axis shorthands and longhands

Logical axis shorthands are useful when both ends of an axis share a value:

.panel {
  margin-block: 1rem 2rem; /* block-start, block-end */
  padding-inline: 1rem;    /* both inline sides */
  border-inline: 1px solid #bbb;
}

Use logical longhands when the two ends need different values, or when reviewing an explicit mapping is clearer:

.panel {
  padding-inline-start: 1.5rem;
  padding-inline-end: 0.75rem;
}

5. Choose logical or physical properties by intent

• Use logical properties for reading-flow-relative spacing, borders, dimensions, alignment, or placement that should adapt to RTL or vertical writing.
• Use physical properties for a requirement explicitly tied to a physical edge, such as a control pinned to the viewport’s left edge regardless of reading direction.
• Use inline-size and block-size when the component’s dimensions should track its axes. Use width and height when its dimensions are intentionally physical.
• Do not mechanically replace names. First decide whether the design intent is flow-relative or physical.

For positioned elements, inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end express flow-relative offsets. Keep top, right, bottom, or left when an offset must stay attached to that physical edge. [MDN: Floating and positioning]

6. Shorthands and cascade pitfalls

Four-value shorthands remain physical

Four-value shorthands such as margin, padding, and border use physical side order. For example, margin: 1px 2px 3px 4px means top, right, bottom, left, in that order. It does not mean block-start, inline-end, block-end, inline-start.

When the intent is flow-relative, use logical longhands or an appropriate logical axis shorthand:

.notice {
  margin-block: 1px 3px;
  margin-inline: 4px 2px;
}

That example sets block-start/end and inline-start/end independently. The mapping of those logical sides to physical edges changes with the writing context. [W3C CSS Logical Properties and Values Level 1]

Mixing physical and logical declarations

Corresponding physical and logical declarations participate together in the cascade according to the element’s computed writing mode. They are not unrelated fallback slots. A mixed rule can therefore produce a different winning physical side when direction or writing mode changes. The W3C draft demonstrates this interaction for a physical side and its logical counterpart. [W3C specification: cascade behavior]

.item {
  margin-left: 1rem;
  margin-inline-start: 2rem;
}

In a horizontal LTR context, both declarations correspond to the left margin, so normal cascade ordering and importance determine the winner. In horizontal RTL, margin-inline-start corresponds to the right margin, while margin-left remains the left margin. Review mixed declarations in the writing contexts the component supports, and remove accidental duplicate intent where possible.

The CSS Logical Properties and Values Level 1 document is a W3C Working Draft dated 4 December 2025, not a final Recommendation. Check the current specification and compatibility data for your project’s target browsers; the research sources here do not establish minimum browser versions. [W3C Working Draft]

7. A practical migration checklist

1. Identify the design intent for each side or dimension: fixed screen edge, or content-flow relationship?
2. For flow-relative styles, identify the relevant axis: inline or block.
3. Replace only the declarations that express that intent, including positioning, borders, spacing, sizing, and alignment where appropriate.
4. Inspect shorthand declarations. Four-value physical shorthands may need to become logical longhands or axis shorthands.
5. Search for physical and logical declarations in the same property group and verify cascade order under supported writing modes and directions.
6. Check actual RTL and vertical-writing contexts, and use semantic document direction where needed.

8. Troubleshooting

Symptom	Likely cause	What to check
A start-side margin appears on the right instead of left.	In RTL, inline-start is the right side by design.	Confirm whether the spacing should follow text flow or stay physically left; use margin-left only for the latter.
A logical property appears to do nothing.	The element’s writing mode or direction may differ from your assumption, or another declaration may win.	Inspect computed writing-mode, direction, the corresponding physical property, and cascade order.
A four-value margin or padding is wrong in RTL.	The shorthand still means top, right, bottom, left.	Replace it with logical side longhands or margin-block/margin-inline as intended.
A component has the wrong dimension in vertical writing.	width and height stay physical.	Use inline-size or block-size if the requirement follows an axis.
A border or inset is on the unexpected side.	The logical start/end mapping changed with direction or writing mode.	Determine the element’s axes and choose logical or physical placement to match the design.
Changing direction changes which declaration wins.	Corresponding logical and physical properties cascade together in the computed writing context.	Reduce mixed declarations or make their ordering and intended override explicit.

9. Test direction-aware layouts efficiently

Review components in the writing modes they are intended to support. A useful visual check is to capture the same page in LTR and RTL and compare whether line-relative margins, borders, alignment, and positioned controls move as intended. A screenshot helps inspect the rendered result; it does not replace checking computed styles or semantic direction.

For browser automation, capture a page after applying the relevant document direction and writing mode, then compare the resulting images. Consider waiting for a stable selector or page state before capturing, and use consistent viewport dimensions so layout changes are easier to inspect.

Or skip the browser setup

For a quick screenshot of a rendered page, ScreenshotNeo is a website screenshot API and MCP server for developers. It accepts a URL in one GET request and returns an image or PDF. Its clean-shot options accept cookie and consent banners like a visitor and remove 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Equivalent Python and Node.js calls:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers say which page verdict applied and whether it was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

10. Performance, reliability, and cost notes

• CSS cost: Logical properties express layout intent; this guide has no benchmark evidence for performance differences. Choose properties for correct layout and maintainability.
• Reliability: Verify layouts in each supported writing context. Mixed declarations, physical shorthands, and assumptions about horizontal writing are common sources of regressions.
• Screenshot checks: Consistent viewports and stable page state make visual comparisons easier. A screenshot shows output, while computed-style inspection explains why a side mapped as it did.
• API billing: ScreenshotNeo states that only clean shots are billed; bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Plans range from Free (1,000 monthly) through Starter ($5/3,000), Growth ($15/15,000), Pro ($39/60,000), Scale ($99/250,000), and Business ($249/1,000,000). Yearly billing gives two months free; every feature is on every plan. Confirm current details on its site before choosing a plan.

11. Frequently asked questions

What is the difference between inline-size and width?

width specifies a physical horizontal dimension. inline-size specifies the dimension along the inline axis, whose physical orientation depends on the writing mode.

How do I replace margin-left with a logical property?

If the margin belongs at the start of the text line, use margin-inline-start. If it belongs at the end, use margin-inline-end. If it must always stay on the left edge, retain margin-left.

Do CSS logical properties work in vertical writing modes?

They are designed to express layout relative to writing flow, including vertical writing. Check the target browsers’ current compatibility data before relying on a particular property.

Do logical properties automatically make all text bidirectional?

No. They map layout properties to writing axes. Text direction and bidirectional behavior also depend on appropriate markup and writing-context settings.

Conclusion

Choose logical properties when the relationship should follow the content flow: inline for the text line, block for block progression. Choose physical properties when a design truly means a fixed physical edge or dimension. Treat shorthands and mixed declarations deliberately, then review the component in the writing contexts it supports.