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
Medien	visuell
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()`;
Kanonische Reihenfolge	nach 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

Support im Flex Layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Flex Layout	Chrome ?	Edge ?	Firefox Vollständige Unterstützung 63	IE Keine Unterstützung Nein	Opera ?	Safari Keine Unterstützung Nein	WebView Android ?	Chrome Android ?	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 63	Opera Android ?	Safari iOS Keine Unterstützung Nein	Samsung Internet Android ?

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt

Support im Grid Layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	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` Vollständige Unterstützung 4.4 Alternativer Name Deaktiviert Alternativer Name Verwendet den nicht standardisierten Namen: `grid-gap` Deaktiviert From version 4.4: this feature is behind the `Enable experimental Web Platform features` preference.	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.	Edge Mobile Keine Unterstützung Nein	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 6.0 Alternativer Name 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	Edge Mobile	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 Ja 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 Vollständige Unterstützung 1.5 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 Ja 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 Ja Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Mobile Keine Unterstützung Nein	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 Ja Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-
`<percentage>` values Experimentell	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	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 61	Opera Android Vollständige Unterstützung 47	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`calc()` values Experimentell	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	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 61	Opera Android Vollständige Unterstützung 47	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.: Experimentell. Das Verhalten kann sich zukünftig ändern.
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

column-gap

Ü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

Schlagwörter des Dokuments und Mitwirkende

Lernen Sie das Beste aus dem Bereich Web-Entwicklung

Vielen Dank! Sehen Sie bitte in Ihrem Posteingang nach, um das Abonnement zu bestätigen.