Logical properties provide writing-mode aware alternatives to physical properties like left, right, top, and bottom. Here's how to use them for better internationalization.
Physical vs Logical#
Loading code block...
Inline and Block Axes#
Loading code block...
Margin Properties#
Loading code block...
Padding Properties#
Loading code block...
Border Properties#
Loading code block...
Border Radius#
Loading code block...
Inset Properties#
Loading code block...
Text Alignment#
Loading code block...
Float and Clear#
Loading code block...
Overflow#
Loading code block...
Complete Component Example#
Loading code block...
Navigation Component#
Loading code block...
Form Layout#
Loading code block...
Best Practices#
When to Use:
✓ Multi-language applications
✓ RTL language support
✓ Component libraries
✓ New projects from scratch
Migration:
✓ Start with new components
✓ Replace gradually
✓ Test with dir="rtl"
✓ Use CSS logical shorthands
Naming Reference:
block-start → top (horizontal-tb)
block-end → bottom (horizontal-tb)
inline-start → left (LTR) / right (RTL)
inline-end → right (LTR) / left (RTL)
Avoid:
✗ Mixing physical and logical randomly
✗ Forgetting vertical writing modes
✗ Ignoring browser support
✗ Over-complicating simple layouts
Conclusion#
CSS logical properties provide writing-mode aware alternatives to physical properties, making layouts automatically adapt to RTL languages and vertical writing modes. Use inline-* for horizontal flow, block-* for vertical flow, and start/end instead of left/right. This approach simplifies internationalization and creates more maintainable, direction-agnostic CSS for modern multilingual applications.