Logical properties mô tả layout theo hướng dòng chảy của nội dung (start/end, inline/block) thay vì các hướng vật lý (left/right/top/bottom). Điều này làm cho một stylesheet duy nhất tự động thích ứng với các ngôn ngữ viết từ phải sang trái (Ả Rập, Do Thái) hoặc từ trên xuống dưới.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* trái + phải trong LTR (cả hai cạnh inline) */
margin-block: 2rem; /* trên + dưới */
margin-inline-start: 1rem; /* cạnh inline "start" (trái LTR / phải RTL) */
padding-block-end: 1rem; /* dưới trong viết ngang */
inset-inline-start: 0; /* phiên bản logical của left/right cho định vị */
Với physical properties, hỗ trợ tiếng Ả Rập nghĩa là viết cả một bộ style thứ hai được mirror (margin-left → margin-right, v.v.) đằng sau [dir="rtl"]. Với logical properties, cùng một CSS chỉ cần hoạt động — đặt dir="rtl" trên html và margin-inline-start tự động lật sang phía bên phải:
<html dir="rtl"> <!-- toàn bộ layout mirror đúng cách, không cần thay đổi CSS -->
Logical properties cũng xử lý các writing mode dọc (ví dụ một số kiểu sắp chữ Đông Á) và làm cho margin-inline: auto trở thành cách sạch để căn giữa bất kể hướng.
Với bất kỳ sản phẩm nào phát hành ở nhiều ngôn ngữ, logical properties loại bỏ nhu cầu duy trì các stylesheet RTL được mirror — một bộ rule thích ứng với hướng viết.
Ngay cả với các trang chỉ LTR, chúng là một mô hình tư duy sạch hơn (start/end, inline/block), và ngày càng trở thành mặc định được khuyến nghị trong CSS hiện đại.