Support Logical Shorthands in CSS

URL: https://www.oddbird.net/2025/03/20/logical-shorthand/

CSS began to add logical properties and values in 2017, allowing us to replace static physical terms like top and bottom with flow-relative terms like inline-start or block-end. The longhand properties are likely familiar by now – from padding-inline-start to inline-size and block-size.

Once I discovered margin-block, inline-start, and block-end, I got excited. It makes web dev so much easier for localization. One of those things that gives more control by being less specific.

Great points about more of these sorts of shorthands throughout the language.

I love this point, "the majority of web design starts from the flow of text – and it’s helpful to define styles that will adapt when that flow changes."

I'm trying to build my site with the only "true" measurements are founded in the typographic scale. But that's besides the point of the article :D