Übersicht

Die CSS Eigenschaft column-gap bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.

Initialwertnormal
Anwendbar aufmulti-column elements, flex containers, grid containers
VererbtNein
Prozentwertebeziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Medienvisuell
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgenach Grammatik

Syntax

/* Schlüsselwortwert */
column-gap: normal; 

/* <length> Werte */
column-gap: 3px;
column-gap: 2.5em;

/* Globale Werte */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

Werte

normal
Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert 1em entsprechen.
<length>
Ein <length> Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, 0 ist jedoch zulässig.

Formale Syntax

normal | <length-percentage>

wobei
<length-percentage> = <length> | <percentage>

Beispiel

.content-box {
  border: 10px solid #000000;
  column-count: 3;
  column-gap: 20px;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Multi-column Layout Module
Die Definition von 'column-gap' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja)-webkit 1.5 (1.8)-moz[1] 10 11.1 3.0 (522)-webkit
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? (Ja) ? ? ?

[1] Vor Firefox 3 (Gecko 1.9) war der zum Schlüsselwort normal zugehörige Standardwert 0 und nicht 1em.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz, Prinz_Rana, fscholz, SJW
Zuletzt aktualisiert von: Sebastianz,