Logische Eigenschaften für Ränder, Rahmen und Abstände

Das Modul beschreibt Zuordnungen für jeden logischen Wert zu einem physischen Gegenstück. Die folgende Tabelle zeigt diese Werte, wenn der writing-mode horizontal-tb ist — mit einer Links-nach-Rechts-Richtung. Die Inline-Richtung verläuft daher horizontal — von links nach rechts — und margin-inline-start wäre gleichbedeutend mit margin-left.

Wenn Sie einen horizontal-tb Schreibmodus mit einer Rechts-nach-Links-Textausrichtung verwendeten, dann wäre margin-inline-start dasselbe wie margin-right. In einem vertikalen Schreibmodus wäre es dasselbe wie die Verwendung von margin-top.

Es gibt auch einige zusätzliche Kurzschreibweisen, die möglich sind, weil wir gleichzeitig beide Block- oder beide Inline-Kanten der Box ansprechen können. Diese Kurzschreibweisen haben kein physisches Äquivalent.

Die abgebildeten Randeigenschaften von margin-inline-start, margin-inline-end, margin-block-start und margin-inline-end können anstelle ihrer physischen Gegenstücke verwendet werden.

Dieses Beispiel hat zwei Boxen mit unterschiedlich großen Rändern an jeder Kante. Ein zusätzliches Behältnis mit einem Rahmen wurde hinzugefügt, um den Rand deutlicher sichtbar zu machen.

Eine Box verwendet physische Eigenschaften und die andere logische Eigenschaften. Versuchen Sie, die direction-Eigenschaft auf rtl zu ändern, um die Boxen in einer Rechts-nach-Links-Richtung anzuzeigen; die Ränder der ersten Box bleiben an derselben Stelle, während die Ränder auf der Inline-Dimension der zweiten Box umschalten.

Versuchen Sie auch, den writing-mode von horizontal-tb auf vertical-rl zu ändern. Beachten Sie, wie die Ränder bei der ersten Box an derselben Stelle bleiben, sich aber bei der zweiten Box entsprechend der Schreibrichtung verschieben.

Es gibt Kurzschreibweisen, um entweder beide Inline-Seiten oder beide Block-Seiten anzuvisieren, margin-inline bzw. margin-block. Jede akzeptiert zwei Werte. Der erste Wert wird am Anfang dieser Dimension angewendet, der zweite am Ende. Wenn nur ein Wert festgelegt ist, wird er auf beide angewendet.

In einem horizontalen Schreibmodus würde dieses CSS einen 5px Rand an der Oberseite der Box und einen 10px Rand an der Unterseite anwenden.

.box {
  margin-block: 5px 10px;
}

Die abgebildeten Abstands-Eigenschaften von padding-inline-start, padding-inline-end, padding-block-start und padding-inline-end können anstelle ihrer physischen Gegenstücke verwendet werden.

In diesem Beispiel gibt es zwei Boxen. Eine hat physische Abstands-Eigenschaften gesetzt und die andere verwendet logische Abstands-Eigenschaften. Mit einem writing-mode von horizontal-tb sollten beide Boxen gleich aussehen.

Versuchen Sie, die direction-Eigenschaft auf rtl zu ändern, um die Boxen in einer Rechts-nach-Links-Richtung anzuzeigen. Der Abstand bei der ersten Box bleibt an derselben Stelle, während der Abstand auf der Inline-Dimension der zweiten Box umschaltet.

Sie können auch versuchen, den writing-mode von horizontal-tb auf vertical-rl zu ändern. Auch hier ist zu beachten, dass der Abstand bei der ersten Box an gleicher Stelle bleibt, sich jedoch bei der zweiten Box entsprechend der Schreibrichtung verschiebt.

Wie bei den Rändern gibt es zweistellige Kurzschreibweisen für Abstände — padding-inline und padding-block — die es ermöglichen, den Abstand der beiden Inline- und der beiden Block-Dimensionen einzustellen.

Bei einem horizontalen writing-mode würde dieses CSS 5px Abstand an der Oberseite der Box und 10px Abstand an der Unterseite anwenden:

.box {
  padding-block: 5px 10px;
}

Die Rahmeneigenschaften sind der Hauptgrund, warum dieses Modul so viele Eigenschaften zu haben scheint, da es Langhand-Logik-Eigenschaften für die Farbe, Breite und den Stil des Rahmens auf jeder Seite einer Box bereitstellt, zusammen mit der Abkürzung, um alle drei auf einmal für jede Seite einzustellen. Wie bei Rand und Abstand gibt es eine abgebildete Version jeder physischen Eigenschaft.

Das folgende Demo verwendet einige Langschreibweisen und drei Kurzschreibwerte. Versuchen Sie, die direction-Eigenschaft auf rtl zu ändern, um die Boxen in einer Rechts-nach-Links-Richtung anzuzeigen, oder den writing-mode von horizontal-tb auf vertical-rl zu ändern.

Es gibt zweistellige Kurzschreibweisen, um die Breite, den Stil und die Farbe der Block- oder Inline-Dimension festzulegen, und Kurzschreibweisen, um alle drei Werte in der Block- oder Inline-Dimension festzusetzen. Der folgende Code würde Ihnen in einem horizontalen Schreibmodus einen 2px solid grünen Rahmen oben und unten auf der Box und einen 4px dotted lila Rahmen links und rechts geben.

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

Das Modul hat flussbezogene Äquivalente für die border-radius Langhande. Das folgende Beispiel würde im horizontalen writing-mode den oberen rechten Rahmenradius auf 1em, den unteren Rechteck auf 0, den unteren linken auf 20px und den oberen linken auf 40px setzen.

.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

Die Spezifikation macht einen Vorschlag für die vierwertigen Kurzschreibweisen wie die margin-Eigenschaft, jedoch ist die endgültige Entscheidung darüber noch ungelöst und wird in diesem Problem diskutiert.

Die Verwendung einer vierwertigen Kurzschreibweise wie margin, padding oder border wird derzeit die physischen Versionen verwenden. Wenn es also wichtig ist, dem Fluss des Dokuments zu folgen, verwenden Sie vorerst die Langhande-Eigenschaften.