तार्किक प्रॉपर्टीज सामग्री के प्रवाह की दिशा (शुरुआत/अंत, इनलाइन/ब्लॉक) के आधार पर लेआउट का वर्णन करती हैं, न कि भौतिक दिशाओं (बाएं/दाएं/ऊपर/नीचे) के आधार पर। यह एक ही स्टाइलशीट को दाएं से बाएं (अरबी, हिब्रू) या ऊपर से नीचे लिखी भाषाओं के लिए स्वचालित रूप से अनुकूल बनाता है।
{ : ; : ; : 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 */
भौतिक प्रॉपर्टीज के साथ, अरबी का समर्थन करने का अर्थ है [dir="rtl"] के पीछे दर्पण शैलियों का एक पूरा दूसरा सेट लिखना (margin-left → margin-right, आदि)। तार्किक प्रॉपर्टीज के साथ, वही CSS बस काम करता है — html पर dir="rtl" सेट करें और margin-inline-start स्वचालित रूप से दाईं ओर फ्लिप हो जाता है:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
तार्किक प्रॉपर्टीज ऊर्ध्वाधर लेखन मोड (जैसे कुछ पूर्व एशियाई टाइपोग्राफी) को भी संभालती हैं और margin-inline: auto को दिशा के बावजूद केंद्रित करने का एक स्वच्छ तरीका बनाती हैं।
किसी भी उत्पाद के लिए जो कई भाषाओं में आता है, तार्किक प्रॉपर्टीज दर्पण RTL स्टाइलशीट को बनाए रखने की आवश्यकता को समाप्त करती हैं — नियमों का एक ही सेट लेखन दिशा के अनुकूल होता है।
केवल LTR-ही साइटों के लिए भी यह एक स्वच्छ मानसिक मॉडल (शुरुआत/अंत, इनलाइन/ब्लॉक) है, और यह आधुनिक CSS में क्रमशः अनुशंसित डिफ़ॉल्ट है।