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

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Flex Layout	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 63	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Vollständige Unterstützung 3 Mit Präfix Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 63	Opera Android Keine Unterstützung Nein	Safari iOS Vollständige Unterstützung 2 Mit Präfix Vollständige Unterstützung 2 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Support im Grid Layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Grid Layout	Chrome Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 57 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Vollständige Unterstützung 29 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Vollständige Unterstützung 16 Vollständige Unterstützung 16 Vollständige Unterstützung 16 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap`	Firefox Vollständige Unterstützung 61 Vollständige Unterstützung 61 Vollständige Unterstützung 52 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Keine Unterstützung 40 — 59 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the `layout.css.grid.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 53 Vollständige Unterstützung 53 Vollständige Unterstützung 44 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Vollständige Unterstützung 28 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Vollständige Unterstützung 10.1 Alternativer Name Vollständige Unterstützung 10.1 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap`	WebView Android Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 57 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap`	Chrome Android Vollständige Unterstützung 66 Vollständige Unterstützung 66 Vollständige Unterstützung 57 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Vollständige Unterstützung 29 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Vollständige Unterstützung 61 Vollständige Unterstützung 61 Vollständige Unterstützung 52 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Keine Unterstützung 40 — 59 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the `layout.css.grid.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Vollständige Unterstützung 47 Vollständige Unterstützung 47 Vollständige Unterstützung 43 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Vollständige Unterstützung 28 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Vollständige Unterstützung 10.3 Alternativer Name Vollständige Unterstützung 10.3 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap`	Samsung Internet Android Vollständige Unterstützung 9.0 Vollständige Unterstützung 9.0 Vollständige Unterstützung 6.0 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap`

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.: Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.: Verwendet einen nicht standardisierten Namen.

Support im Multi-column Layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Multi-column Layout	Chrome Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung 1 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 12 Vollständige Unterstützung 12 Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Vollständige Unterstützung 52 Vollständige Unterstützung 52 Keine Unterstützung 1.5 — 74 Mit Präfix Hinweise Mit Präfix Benötigt das Herstellerpräfix: -moz- Hinweise Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`.	IE Vollständige Unterstützung 10	Opera Vollständige Unterstützung 37 Vollständige Unterstützung 37 Vollständige Unterstützung 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Keine Unterstützung 11.1 — 15	Safari Vollständige Unterstützung 10 Vollständige Unterstützung 10 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung ≤37 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung 18 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Android Vollständige Unterstützung 52 Vollständige Unterstützung 52 Vollständige Unterstützung 4 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 37 Vollständige Unterstützung 37 Vollständige Unterstützung 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit- Keine Unterstützung 11.1 — 14	Safari iOS Vollständige Unterstützung 10 Vollständige Unterstützung 10 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 5.0 Vollständige Unterstützung 5.0 Vollständige Unterstützung 1.0 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-
`calc()` values	Chrome Vollständige Unterstützung 66	Edge Vollständige Unterstützung 16	Firefox Vollständige Unterstützung 61	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 53	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 66	Chrome Android Vollständige Unterstützung 66	Firefox Android Vollständige Unterstützung 61	Opera Android Vollständige Unterstützung 47	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 9.0
`<percentage>` values	Chrome Vollständige Unterstützung 66	Edge Vollständige Unterstützung 16	Firefox Vollständige Unterstützung 61	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 53	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 66	Chrome Android Vollständige Unterstützung 66	Firefox Android Vollständige Unterstützung 61	Opera Android Vollständige Unterstützung 47	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 9.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

CSS Referenz

Übersicht

Syntax

Werte

Formale Syntax

Beispiel

Spezifikationen

Browser Kompatibilität

Support im Flex Layout

Legende

Support im Grid Layout

Legende

Support im Multi-column Layout

Legende

Siehe auch

Lernen Sie das Beste aus dem Bereich Web-Entwicklung