CSSLogical property mô tả vị trí theo hướng viết của ngôn ngữ thay vì theo trái/phải/trên/dưới cố định.
css
/* physical — cố định theo màn hình */
.card { margin-left: 16px; padding-top: 12px; border-right: 1px solid; }
/* logical — tự lật theo hướng viết */
.card { margin-inline-start: 16px; padding-block-start: 12px; border-inline-end: 1px solid; }Hai trục:
- inline — hướng chữ chạy. LTR: trái→phải. RTL (Ả Rập, Do Thái): phải→trái.
- block — hướng dòng xếp chồng. Thường là trên→dưới.
| Physical | Logical |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
padding-top | padding-block-start |
width / height | inline-size / block-size |
text-align: left | text-align: start |
Viết tắt hai chiều rất tiện, kể cả khi không làm đa ngôn ngữ:
css
.section { padding-inline: clamp(16px, 4vw, 32px); } /* trái + phải */
.stack { margin-block: 24px; } /* trên + dưới */html
<html dir="rtl"> <!-- margin lật sang phải, border lật sang trái, tự động -->Chốt: ngay cả dự án chỉ có tiếng Việt cũng nên dùng padding-inline / margin-block — ngắn hơn, ít lặp hơn, và nếu sau này thêm ngôn ngữ RTL thì không phải viết lại CSS.