13 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Logical properties - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties | reference | web, html, css, javascript, documentation | 2026-05-05T05:36:54.907762+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Logical properties
CSS logical properties provide a way to lay out content based on the document's writing mode and direction rather than the physical dimensions of the viewport. This enables more flexible and maintainable designs, especially for websites supporting multiple languages.
Whereas physical properties, like top, right, padding-bottom, and border-bottom-left-radius, define positions and features based on physical directions and reference specific sides of an element, logical properties such as inset-block-start, inset-inline-end, padding-block-end, and border-end-end-radius use logical directional keywords that are relative to the content flow along the block and inline axes.
In this article
Block direction
The block axis refers to the axis that defines the stacking order of elements in a block layout. It's essentially the direction along which blocks of content — like paragraphs (<p>), headings, and divs (<div>) — are laid out on a webpage. This is also known as the block direction. In left-to-right and left-to-right languages, the block direction is the vertical direction of the content flow, going from top to bottom.
The block-start and block-end directions represent the start edge and end edge of content along the block axis, or the "from" and "to" directions, respectively, with block-start being the equivalent of top and block-end being the equivalent of bottom in horizontal writing modes.
Inline direction
The inline axis is perpendicular to the block axis. The inline axis represents the direction along which inline content such as text flows within a block. This is also known as the inline direction. In left-to-right writing modes, like English, the inline direction is horizontal, left-to-right. In right-to-left languages, like Arabic and Hebrew, the inline direction is horizontal, right-to-left.
Inline-start and inline-end represent the start edge and end edge of content along the inline axis, respectively, with the values and properties inline-start and inline-end being equivalent to left and right properties and values in horizontal writing modes. Which ones are equivalent to right or left depends on the writing direction — for example inline-start is left in left-to-right languages and right in right-to-left languages.