Logical Properties

CSS Logical Properties for International and Reusable Layouts

Traditional CSS often describes layout with physical directions: left, right, top, and bottom. That is intuitive until the same component must work in a right-to-left language or a different writing mode. Logical properties describe layout relative to the flow of text. Instead of saying “left padding,” you can say “padding at the inline start.” The browser maps that intent to the correct physical edge. Think in block and inline axes CSS logical layout uses two axes: