CSSCSS logical properties thay thế physical properties (left, right, top, bottom) bằng giá trị logic để CSS tự động thích ứng theo hướng viết của ngôn ngữ.
Ví dụ mapping:
- margin-inline-start thay margin-left — tự đổi sang phải khi RTL
- padding-block-start thay padding-top
- border-inline-end thay border-right
Quan trọng cho i18n: cùng một component hoạt động đúng với LTR (tiếng Anh) và RTL (tiếng Ả Rập) mà không cần viết thêm CSS.
CSS logical properties replace physical directional properties (left, right, top, bottom) with logical equivalents (inline-start, inline-end, block-start, block-end) so CSS automatically adapts to the writing direction.
- For example,
margin-inline-startreplacesmargin-left— when switching from LTR (English) to RTL (Arabic), the margin automatically moves to the right without extra CSS. - Similarly,
padding-block-startreplacespadding-top, andborder-inline-endreplacesborder-right. - This is essential for internationalization (i18n) and creates more flexible layouts across all languages.