Sifat logik menggambarkan tata letak dalam hal arah aliran konten (mula/akhir, sebaris/blok) bukan arah fizikal (kiri/kanan/atas/bawah). Ini memungkinkan satu lembaran gaya beradaptasi secara automatik dengan bahasa yang ditulis kanan-ke-kiri (Arab, Ibrani) atau atas-ke-bawah.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
Dengan sifat fizikal, menyokong Arab bermakna menulis set lengkap gaya terpancar (margin-left → margin-right, dsb.) di belakang [dir="rtl"]. Dengan sifat logik, CSS yang sama hanya berfungsi — tetapkan dir="rtl" pada html dan margin-inline-start secara automatik terbalik ke sisi kanan:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Sifat logik juga mengendalikan mod penulisan menegak (cth. beberapa penyusunan huruf Asia Timur) dan menjadikan margin-inline: auto cara yang bersih untuk memusatkan tanpa mengira arah.
Untuk sebarang produk yang dihantar dalam pelbagai bahasa, sifat logik menghapuskan keperluan untuk mengekalkan lembaran gaya RTL terpancar — satu set peraturan menyesuaikan dengan arah penulisan.
Walaupun untuk laman LTR-sahaja ia merupakan model mental yang lebih bersih (mula/akhir, sebaris/blok), dan ia semakin menjadi standard yang disyorkan dalam CSS moden.