CSS logical properties and values
=================================

The **CSS logical properties and values** module introduces 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.

### New properties and values

CSS was initially designed with only physical coordinates in its controls. The module defines new flow–relative equivalents for many values and properties.

Some physical properties now have logical equivalents. Properties that accept physical values (`top`, `bottom`, `left`, `right`) now also accept flow-relative logical values (`block-start`, `block-end`, `inline-start`, `inline-end`).

The transition to logical axes is ongoing and not fully defined by the module; some properties don't yet have logical equivalents.

Reference
---------

### Properties for sizing

* `block-size`
* `inline-size`
* `max-block-size`
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### Properties for margins

* `margin` (`logical` 
Experimental
 keyword)
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
### Properties for paddings

* `padding` (`logical` 
Experimental
 keyword)
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### Properties for borders

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-style`
* `border-width`
### Properties for border radius

* `border-radius`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
### Properties for positioning

* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### Properties for size containment

* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
### Properties for scrolling

* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
### Properties for floating

* `clear` (`inline-end` and `inline-start` keywords)
* `float` (`inline-end` and `inline-start` keywords)
### Other properties

* `caption-side` (`inline-end` and `inline-start` keywords)
* `resize` (`block` and `inline` keywords)
* `text-align` (`end` and `start` keywords)
### Deprecated properties

* `offset-block-end` 
Non-standard

Deprecated
 (now `inset-block-end`)
* `offset-block-start` 
Non-standard

Deprecated
 (now `inset-block-start`)
* `offset-inline-end` 
Non-standard

Deprecated
 (now `inset-inline-end`)
* `offset-inline-start` 
Non-standard

Deprecated
 (now `inset-inline-start`)
### Unsupported properties

The following properties don't have logical equivalents:

* `background-position-x`
* `background-position-y`
### Unsupported values

The following properties accept only physical values:

* `text-underline-position`
* `box-shadow`
* `text-shadow`
* `clip-path`
* `<position>`
    + `background-position`
    + `object-position`
    + `mask-position`
    + `offset-position`
    + `offset-anchor`
    + `transform-origin`
    + `perspective-origin`
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 |
| --- |
| CSS Logical Properties and Values Level 1  |

Browser compatibility
---------------------

See the individual property pages for full compatibility information.