CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.
Block vs. inline
Logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.
- Block dimension
- The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.
- Inline dimension
- The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.
Reference
Properties for sizing
Properties for margins, borders and padding
border-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-color(logicalkeyword)border-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-start-start-radiusborder-start-end-radiusborder-end-start-radiusborder-end-end-radiusborder-style(logicalkeyword)border-width(logicalkeyword)margin(logicalkeyword)margin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-startpadding(logicalkeyword)padding-blockpadding-block-endpadding-block-startpadding-inlinepadding-inline-endpadding-inline-start
Properties for floating and positioning
clear(inline-endandinline-startkeywords)float(inline-endandinline-startkeywords)insetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start
Other properties
caption-side(inline-endandinline-startkeywords)overflow-blockoverflow-inlineoverscroll-behavior-blockoverscroll-behavior-inlineresize(blockandinlinekeywords)text-align(endandstartkeywords)
Deprecated properties
offset-block-end(nowinset-block-end)offset-block-start(nowinset-block-start)offset-inline-end(nowinset-inline-end)offset-inline-start(nowinset-inline-start)
Guides
- Basic concepts of logical properties and values
- Logical Properties for sizing
- Logical Properties for margins, borders and padding
- Logical Properties for floating and positioning
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Logical Properties and Values Level 1 | Editor's Draft | Initial definition. |
Browser compatibility
In general:
- Firefox has support for the mapped properties — where there is a direct mapping from the physical to the logical version.
- Chrome, from version 69, has support for the mapped properties.
- Edge, from version 79, has the same support as Chrome.
- Firefox 66 introduces support for two value shorthands, also behind a flag in Chrome.
- Internet Explorer has no support.
See the individual property pages for full compatibility information.