Ü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 aufmehrspaltige Elemente
VererbtNein
Prozentwertebeziehen sich auf die Inhaltsbreite des mehrspaltigen Elements
Medienvisuell
Berechneter Wertwie angegeben, wobei Längen in absolute Werte umgewandelt werden
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

<length-percentage> | normal

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,