column-gap

Ü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
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();

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

Support im Flex Layout

BCD tables only load in the browser

Support im Grid Layout

BCD tables only load in the browser

Support im Multi-column Layout

BCD tables only load in the browser

Siehe auch