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.

Initialwert	`normal`
Anwendbar auf	multi-column elements, flex containers, grid containers
Vererbt	Nein
Prozentwerte	beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wert	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animationstyp	Lä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

column-gap = 
  normal               |
  <length-percentage>  

<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

CSS Referenz