Logische Eigenschaften für Margen, Rahmen und Abstände

Das Modul beschreibt die Zuordnungen für jeden logischen Wert zu einem physischen Gegenstück. Die folgende Tabelle ordnet diese Werte für den Fall zu, dass der writing-mode horizontal-tb ist – mit einer Richtung von links nach rechts. Die Inline-Richtung verläuft daher horizontal – von links nach rechts – und margin-inline-start wäre das Äquivalent zu margin-left.

Wenn Sie einen horizontal-tb Schreibmodus mit einer Textausrichtung von rechts nach links verwenden würden, wäre margin-inline-start dasselbe wie margin-right, und in einem vertikalen Schreibmodus wäre es dasselbe wie die Verwendung von margin-top.

Es gibt auch einige zusätzliche Kurzfassungen, die es ermöglichen, gleichzeitig beide Block- oder beide Inline-Kanten der Box anzusprechen. Diese Kurzformen haben kein physisches Äquivalent.

Die zugeordneten Margin-Eigenschaften margin-inline-start, margin-inline-end, margin-block-start und margin-inline-end können anstelle ihrer physischen Gegenstücke verwendet werden.

Dieses Beispiel enthält zwei Boxen mit unterschiedlich großen Margen an jedem Rand. Ein extra Container mit einem Rahmen wurde hinzugefügt, um den Margin deutlicher zu machen.

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

Versuchen Sie auch, den writing-mode von horizontal-tb zu vertical-rl zu ändern. Beachten Sie, wie die Margen bei der ersten Box an derselben Stelle bleiben, sich aber um die Textrichtung in der zweiten Box drehen.

<div class="container">
  <div class="inner">
    <div class="physical box">
      margin-top: 5px<br />
      margin-right: 0<br />
      margin-bottom: 2em<br />
      margin-left: 50px
    </div>
  </div>
  <div class="inner">
    <div class="logical box">
      margin-block-start: 5px<br />
      margin-inline-end: 0<br />
      margin-block-end: 2em<br />
      margin-inline-start: 50px
    </div>
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.inner {
  border: 2px dotted grey;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  width: 220px;
  height: 220px;
}

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  margin-top: 5px;
  margin-right: 0;
  margin-bottom: 2em;
  margin-left: 50px;
}

.logical {
  margin-block-start: 5px;
  margin-inline-end: 0;
  margin-block-end: 2em;
  margin-inline-start: 50px;
}

Es gibt Kurzformen, um entweder beide Inline-Seiten oder beide Block-Seiten anzusprechen, margin-inline und margin-block. Jede akzeptiert zwei Werte. Der erste Wert wird auf den Anfang dieser Dimension angewendet, der zweite auf das Ende. Wenn nur ein Wert gesetzt wird, wird er auf beide angewendet.

In einem horizontalen Schreibmodus würde dieses CSS 5px Margin auf die Oberseite der Box und 10px Margin auf die Unterseite anwenden.

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

Die zugeordneten Padding-Eigenschaften 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 Padding-Eigenschaften gesetzt und die andere verwendet logische Padding-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. Das Padding der ersten Box bleibt an derselben Stelle, während das Padding an der Inline-Dimension der zweiten Box wechselt.

Sie können auch versuchen, den writing-mode von horizontal-tb zu vertical-rl zu ändern. Beachten Sie erneut, wie das Padding bei der ersten Box an derselben Stelle bleibt, sich aber um die Textrichtung in der zweiten Box dreht.

<div class="container">
  <div class="physical box">
    padding-top: 5px<br />
    padding-right: 0<br />
    padding-bottom: 2em<br />
    padding-left: 50px
  </div>

  <div class="logical box">
    padding-block-start: 5px<br />
    padding-inline-end: 0<br />
    padding-block-end: 2em<br />
    padding-inline-start: 50px
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  margin: 10px;
  width: 220px;
  height: 220px;
}

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 2em;
  padding-left: 50px;
}

.logical {
  padding-block-start: 5px;
  padding-inline-end: 0;
  padding-block-end: 2em;
  padding-inline-start: 50px;
}

Wie bei Margin gibt es zweifache Kurzformen für Padding — padding-inline und padding-block — die es ermöglichen, das Padding der beiden Inline- und der beiden Blockdimensionen zu setzen.

In einem horizontalen writing-mode würde dieses CSS 5px Padding oben und 10px Padding unten auf die Box anwenden:

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

Die Rahmen-Eigenschaften sind der Hauptgrund dafür, dass dieses Modul so viele Eigenschaften zu haben scheint, da es Langform-logische Eigenschaften für die Farbe, Breite und den Stil des Rahmens auf jeder Seite einer Box bereitstellt, zusammen mit der Kurzform, um alle drei auf einmal für jede Seite zu setzen. Wie bei Margin und Padding gibt es eine zugeordnete Version jeder physischen Eigenschaft.

Das untenstehende Demo verwendet einige Langformen und drei Kurzformwerte. Wie bei den anderen Demos 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 zu vertical-rl zu ändern.

<div class="container">
  <div class="physical box">Borders using physical properties.</div>
  <div class="logical box">Borders using logical properties.</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}
.box {
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  margin: 10px;
  width: 220px;
  height: 220px;
}

.box {
  writing-mode: horizontal-tb;
  direction: ltr;
}

.physical {
  border-top: 2px solid hotpink;
  border-right-style: dotted;
  border-right-color: goldenrod;
  border-right-width: 5px;
  border-bottom: 4px double black;
  border-left: none;
}

.logical {
  border-block-start: 2px solid hotpink;
  border-inline-end-style: dotted;
  border-inline-end-color: goldenrod;
  border-inline-end-width: 5px;
  border-block-end: 4px double black;
  border-inline-start: none;
}

Es gibt zweifache Kurzformen, um die Breite, den Stil und die Farbe der Block- oder Inline-Dimension zu setzen, sowie Kurzformen, um alle drei Werte in der Block- oder Inline-Dimension zu setzen. Der untenstehende Code würde Ihnen im horizontalen Schreibmodus einen 2px grünen soliden Rahmen an der Ober- und Unterseite der Box, und einen 4px gepunkteten lila Rahmen auf der linken und rechten Seite geben.

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

Das Modul hat flussbezogene Entsprechungen für die Langformen von border-radius. Das folgende Beispiel würde im horizontalen writing-mode den oberen rechten Randradius auf 1em setzen, den unteren rechten auf 0, den unteren linken auf 20px und den oberen linken auf 40px.

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

Die Spezifikation gibt eine Empfehlung für die vier-Wert-Kurzformen wie die margin-Eigenschaft, jedoch ist die endgültige Entscheidung, wie dies gekennzeichnet werden soll, noch ungelöst und wird in dieser Diskussion thematisiert.

Die Verwendung jeder vier-Wert-Kurzform wie margin, padding oder border wird derzeit die physischen Versionen verwenden, daher, wenn es wichtig ist, dem Fluss des Dokuments zu folgen, verwenden Sie vorerst die Langform-Eigenschaften.