Logical properties
CSS logische Eigenschaften bieten eine Möglichkeit, Inhalte basierend auf dem Schreibmodus und der Richtung des Dokuments anzuordnen, anstatt auf die physischen Abmessungen des Viewports. Dies ermöglicht flexiblere und pflegeleichtere Designs, insbesondere für Websites, die mehrere Sprachen unterstützen.
Während physische Eigenschaften, wie top, right, padding-bottom und border-bottom-left-radius, Positionen und Merkmale basierend auf physischen Richtungen definieren und sich auf bestimmte Seiten eines Elements beziehen, verwenden logische Eigenschaften wie inset-block-start, inset-inline-end, padding-block-end und border-end-end-radius logische Richtungsbezeichner, die relativ zum Inhaltsfluss entlang der Block- und Inline-Achsen sind.
Blockrichtung
Die Blockachse bezieht sich auf die Achse, die die Stapelreihenfolge von Elementen in einem Block-Layout definiert. Es ist im Wesentlichen die Richtung, entlang derer Inhaltsblöcke — wie Absätze (<p>), Überschriften und Divs (<div>) — auf einer Webseite angeordnet werden. Dies ist auch als die Blockrichtung bekannt. In von links nach rechts und von links nach rechts verlaufenden Sprachen ist die Blockrichtung die vertikale Richtung des Inhaltsflusses, von oben nach unten verlaufend.
Die block-start- und block-end-Richtungen repräsentieren die Startkante und Endkante des Inhalts entlang der Blockachse bzw. die "von" und "nach" Richtungen, wobei block-start dem Äquivalent von top und block-end dem Äquivalent von bottom in horizontalen Schreibrichtungen entspricht.
Inlinerichtung
Die Inline-Achse steht senkrecht zur Blockachse. Die Inline-Achse repräsentiert die Richtung, entlang derer Inline-Inhalte wie Texte innerhalb eines Blocks fließen. Dies wird auch als die Inlinerichtung bezeichnet. In Schreibrichtungen von links nach rechts, wie Englisch, ist die Inlinerichtung horizontal, von links nach rechts. In Sprachen von rechts nach links, wie Arabisch und Hebräisch, ist die Inlinerichtung horizontal, von rechts nach links.
Inline-start und inline-end repräsentieren die Startkante und Endkante des Inhalts entlang der Inline-Achse, wobei die Werte und Eigenschaften inline-start und inline-end den Eigenschaften und Werten left und right in horizontalen Schreibrichtungen entsprechen. Welche äquivalent zu right oder left sind, hängt von der Schreibrichtung ab — zum Beispiel ist inline-start left in Sprachen von links nach rechts und right in Sprachen von rechts nach links.