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.