Logical Properties and Writing Modes
Logical properties describe layout in terms of inline and block directions instead of physical left, right, top, and bottom directions. This supports writing modes such as right-to-left languages and vertical writing.
Examples include margin-inline, padding-block, inset-inline-start, and border-block-end.
Logical CSS Directions
Writing-Mode Friendly CSS
.card {
margin-inline: auto;
padding-block: 1.5rem;
padding-inline: 1rem;
border-block-end: 1px solid #cbd5e1;
}💡 Logical properties adapt to the document's writing direction.
Key Takeaways
- Logical properties improve internationalization.
- Think in terms of block and inline axes.
Knowledge Check
Which is a logical alternative to `margin-left`?