https://nalar.dev/tags/logical-properties/ Recent content in Logical Properties on Nalar Hugo en-us Wed, 02 Sep 2026 00:00:00 +0700 https://nalar.dev/css-logical-properties-for-international-and-reusable-layouts/ Wed, 02 Sep 2026 00:00:00 +0700 https://nalar.dev/css-logical-properties-for-international-and-reusable-layouts/ <p>Traditional CSS often describes layout with physical directions: <code>left</code>, <code>right</code>, <code>top</code>, and <code>bottom</code>. That is intuitive until the same component must work in a right-to-left language or a different writing mode.</p> <p>Logical properties describe layout relative to the flow of text. Instead of saying &ldquo;left padding,&rdquo; you can say &ldquo;padding at the inline start.&rdquo; The browser maps that intent to the correct physical edge.</p> <h2 id="think-in-block-and-inline-axes">Think in block and inline axes</h2> <p>CSS logical layout uses two axes:</p>