Exploring CSS Logical Properties
A couple days ago, while tweaking some CSS in the Chrome DevTools, I noticed padding-block-end in the autocomplete suggestions. My first thought was that this might be a new feature, but after investigating, I discovered these logical properties have been around for quite some time. And recently, they’ve been getting more attention.
As developers, we’re all familiar with traditional properties like margin-top and padding-left.
margin-left: 8px;
padding-right: 16px;These make intuitive sense when we think about positioning elements using physical directions: left, right, top, and bottom.
But this approach is limiting. Many languages don’t follow left-to-right patterns. Arabic reads right-to-left (RTL), while Japanese can be even written vertically. Suddenly, left and right aren’t so universal anymore, aren’t they?
Enter CSS Logical Properties
Logical properties offer a more flexible way to define layouts which adapt automatically. Instead of margin-left or padding-right, we use:
margin-inline-start: 8px;
padding-inline-end: 16px;These properties respect the document’s writing mode, automatically adjusting whether your text flows LTR, RTL, or vertically.
Logical vs. Physical Properties
Here’s how logical properties map to traditional ones:
margin-inline-start: 8px; // margin-left
margin-inline-end: 8px; // margin-right
margin-block-start: 8px; // margin-top
margin-block-end: 8px; // margin-bottom
padding-inline-start: 8px; // padding-left
padding-inline-end: 8px; // padding-right
padding-block-start: 8px; // padding-top
padding-block-end: 8px; // padding-bottomborder-inline-start: 8px; // border-left
border-inline-end: 8px; // border-right
border-block-start: 8px; // border-top
border-block-end: 8px; // border-bottomblock-size: 100%; // like height
inline-size: 100%; // like widthblock-size: 100%; // like height, works also with min and max
inline-size: 100%; // like width, works also with min and maxA Practical Example: Responsive Card Layout
As a quick example, I created a simple card component or rather the css for it using logical properties:
.card {
display: flex;
flex-direction: column;
border: 1px solid gray;
border-block-end: 2px solid black;
padding: 1rem;
padding-block-start: 0.5rem;
inline-size: 300px;
writing-mode: horizontal-tb;
}If we are now switching here to writing-mode: vertical-rl; — the layout adjusts automatically without rewriting any CSS. That’s powerful!
Browser Support
CSS Logical Properties are already well-supported in modern browsers like Chrome, Firefox, and even Safari. Firefox even supports shorthand properties like margin-block and padding-inline which is hopefully also supported by the other browsers soon.
Final Thoughts
It’s fascinating how certain features can exist for years before they catch our attention. Logical properties are exactly that — widely supported but they feel overlooked. Now that I’ve explored them, I appreciate how they simplify layouts and make CSS more flexible across different writing systems.
If you haven’t tried logical properties yet, I highly recommend adding them to your next project!