Modern CSS Authoring
Logical Properties
Write layouts that adapt to right-to-left text and vertical writing without duplicating physical left and right rules. It replaces physical edges with inline and block intent, introduces logical sizes and insets, and explains direction and vertical writing modes.
Logical properties describe dimensions and edges according to the inline and block flow of the document. They adapt when writing direction or writing mode changes.
Left and right are physical coordinates; start and end express a relationship to language flow. A callout border that belongs at the beginning of a line should follow that beginning in both left-to-right and right-to-left content. Logical sizing offers the same benefit when the inline axis becomes vertical. This topic also connects with CSS Text Alignment and Normal Flow.
Describe intent, not a physical edge
Example
css
.callout {
border-inline-start: 0.3rem solid #0f766e;
padding-inline: 1rem;
padding-block: 0.75rem;
margin-block: 1.5rem;
}
.container {
max-inline-size: 70rem;
margin-inline: auto;
}Inline corresponds to the direction text flows within a line. Block corresponds to the direction lines are stacked. In English these resemble horizontal and vertical axes, but that is not universal.
Direction and writing mode
Example
css
.vertical-label {
writing-mode: vertical-rl;
text-orientation: mixed;
}- Use the HTML
dirattribute for text direction; do not use CSS direction as a substitute for document semantics. inset-inlineandinset-blockreplace paired physical offsets.- Logical border radius and float values are available when a component must follow writing direction.
Logical Property Reference
| Logical property | Physical relationship | Example |
|---|---|---|
| inline-size | Width in horizontal writing modes. | inline-size: 20rem |
| block-size | Height in horizontal writing modes. | block-size: auto |
| margin-inline | Margins on both inline edges. | margin-inline: auto |
| inset-inline-start | Inset at the inline starting edge. | inset-inline-start: 1rem |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logical Properties example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.callout {
border-inline-start: 0.3rem solid #0f766e;
padding-inline: 1rem;
padding-block: 0.75rem;
margin-block: 1.5rem;
}
.container {
max-inline-size: 70rem;
margin-inline: auto;
}
.vertical-label {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<main class="container"><aside class="callout">This border follows the inline start edge.</aside><p class="vertical-label">Vertical label</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| margin-inline | 87 | 87 | 66 | 14.1 |
| writing-mode | 48 | 12 | 41 | 10.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Logical properties express layout intent across left-to-right, right-to-left, and vertical writing.
Use semantic HTML attributes such as dir to establish text direction, then let logical CSS follow it. Convert paired margins, padding, borders, insets, and dimensions together so a component does not mix contradictory physical and logical assumptions.