CSS Logical Properties — เขียน layout ที่ตามทิศทางข้อความ

Logical properties เปลี่ยนจาก physical direction (left/right/top/bottom) เป็น flow-relative (inline/block) ทำให้ layout ทำงานถูกต้องทั้ง LTR และ RTL โดยไม่ต้องเขียน override

/* Physical (เก่า) */
margin-left: 1rem;
padding-top: 0.5rem;
border-right: 1px solid;

/* Logical (ใหม่) */
margin-inline-start: 1rem;   /* = left ใน LTR, right ใน RTL */
padding-block-start: 0.5rem; /* = top ใน horizontal writing mode */
border-inline-end: 1px solid;

shorthand ที่ใช้บ่อย:

margin-inline: auto;          /* margin-left + margin-right */
padding-block: 1rem 2rem;     /* padding-top + padding-bottom */
inset-inline: 0;              /* left + right */

size properties:

inline-size: 100%;    /* = width */
block-size: 200px;    /* = height */
min-inline-size: 0;   /* = min-width */

รองรับทุก browser สมัยใหม่ แนะนำให้ใช้ตั้งแต่ตอนนี้สำหรับ component ใหม่