Styling columns

Der Abstand zwischen den Spalten wird mit der column-gap oder der gap Eigenschaft gesteuert. Die column-gap Eigenschaft ist im mehrspaltigen Layout Modul definiert. Die gap Eigenschaft ist im Box Alignment Modul definiert. Dies ist eine einheitliche Eigenschaft, um Abstände zwischen Boxen in allen Layouts zu definieren, die Abstände unterstützen, einschließlich CSS-Grid-Layout und CSS-Flexible-Box-Layout.

Der Anfangswert von column-gap ist 1em, was verhindert, dass die Spalten ineinander laufen. In anderen Layoutmethoden wird column-gap als Synonym für gap unterstützt, jedoch mit einem Anfangswert von 0. Der Schlüsselwortwert normal setzt column-gap auf den Anfangswert.

Sie können den Abstand ändern, indem Sie einen beliebigen <length> Wert verwenden. Im folgenden Beispiel ist der column-gap auf 40px gesetzt.

Der erlaubte Wert für column-gap ist eine <length-percentage>, was bedeutet, dass Prozentsätze erlaubt sind. Prozentwerte für column-gap werden als Prozentsatz der Breite des Multicol-Containers berechnet.

Die Spezifikation definiert column-rule-width, column-rule-style und column-rule-color, und bietet eine Kurzschreibweise column-rule an. Diese Eigenschaften funktionieren genau wie die border Eigenschaften: Jeder <line-style> kann als column-rule-style verwendet werden, genau wie bei gültigen border-style.

Diese Eigenschaften werden auf das Element angewendet, welches der Multicol-Container ist, und daher werden alle Spalten die gleiche Regel haben. Regeln werden nur zwischen Spalten und nicht an den Außenkanten gezeichnet. Regeln werden auch nur zwischen Spalten gezeichnet, die Inhalt haben.

Im nächsten Beispiel wurde eine 5px-gepunktete Regel mit der Farbe rebeccapurple unter Verwendung der Langformwerte erstellt.

Beachten Sie, dass die Regel selbst keinen Platz einnimmt: Eine breite Regel wird nicht die Spalten auseinander drücken, um Platz für die Regel zu schaffen. Stattdessen überlagert die Regel den Spaltenabstand.

Das folgende Beispiel verwendet eine sehr breite Regel von 40px und einen 10px Abstand. Die Regel wird unterhalb des Spalteninhalts angezeigt. Um Platz auf beiden Seiten der Regel zu schaffen, müsste der Abstand größer als 40px sein.

Dieser Artikel beschreibt alle aktuellen Möglichkeiten, wie Spalten-Boxen gestaltet werden können. Im nächsten Leitfaden werden wir betrachten, wie man Elemente innerhalb eines Containers über alle Spalten hinweg erstreckt.