DiegapCSSKurzform-Eigenschaft legt die Abstände (auchRinnen genannt) zwischen Zeilen und Spalten fest. Diese Eigenschaft gilt fürMehrspalten-,Flex- undGrid- Container.

Probieren Sie es aus

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div>Five</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  width: 200px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}

Bestandteile der Eigenschaft

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• column-gap
• row-gap

Syntax

/* One <length> value */gap: 20px;gap: 1em;gap: 3vmin;gap: 0.5cm;/* One <percentage> value */gap: 16%;gap: 100%;/* Two <length> values */gap: 20px 10px;gap: 1em 0.5em;gap: 3vmin 2vmax;gap: 0.5cm 2mm;/* One or two <percentage> values */gap: 16% 100%;gap: 21px 82%;/* calc() values */gap: calc(10% + 20px);gap: calc(20px + 10%) calc(10% - 5px);/* Global values */gap: inherit;gap: initial;gap: revert;gap: revert-layer;gap: unset;

Werte

Diese Eigenschaft wird als Wert für<'row-gap'> angegeben, gefolgt optional von einem Wert für<'column-gap'>. Wenn<'column-gap'> weggelassen wird, wird er auf denselben Wert wie<'row-gap'> gesetzt. Sowohl<'row-gap'> als auch<'column-gap'> können jeweils als<length> oder<percentage> angegeben werden.

<length>

Legt die Breite der Rinne fest, die Spalten,Flex-Elemente, Flex-Linien undGrid-Linien trennt.

<percentage>

Legt die Breite der Rinne fest, die Spalten, Flex-Elemente, Flex-Linien und Grid-Linien relativ zur Dimension des Elements trennt.

Beschreibung

Diese Eigenschaft definiert Abstände zwischen Spalten imCSS-Mehrspalten-Layout, zwischen Flex-Elementen und Flex-Linien imCSS-Flexiblen Box-Layout und zwischen Zeilen und Spalten imCSS-Grid-Layout.

Die erzeugten Abstände schaffen leere Räume, die die Breite oder Höhe der angegebenen Gap-Größe haben, ähnlich wie ein leeres Element oder Spur. Der sichtbare Raum zwischen Elementen kann vom angegebenengap-Wert abweichen, da Margen, Polsterung und verteilte Ausrichtung den Abstand zwischen Elementen über das durchgap bestimmte Maß hinaus vergrößern können.

Im Grid-Layout definiert der erste Wert die Rinne zwischen Zeilen und der zweite Wert die Rinne zwischen Spalten. In Grid- und Flex-Layouts wird, wenn nur ein Wert angegeben ist, dieser für beide Dimensionen verwendet.

Bei Flex-Containern hängt es von der Richtung ab, ob der erste Wert den Abstand zwischen Flex-Elementen oder zwischen Flex-Linien definiert. Flex-Elemente werden abhängig vom Wert derflex-direction-Eigenschaft entweder in Zeilen oder Spalten angeordnet. Bei Zeilen (row (Standard) oderrow-reverse) definiert der erste Wert den Abstand zwischen Flex-Linien und der zweite den Abstand zwischen Elementen innerhalb jeder Linie. Bei Spalten (column odercolumn-reverse) definiert der erste Wert den Abstand zwischen Flex-Elementen innerhalb einer Flex-Linie und der zweite den Abstand zwischen den einzelnen Flex-Linien.

In Mehrspalten-Containern definiert der erste Wert den Abstand zwischen Spalten. Eine Trennlinie kann dem ansonsten „leeren Raum“ hinzugefügt werden, indem diecolumn-rule-style-Eigenschaft oder Kurzformcolumn-rule verwendet wird.

Prozentuale Gap-Werte werden immer relativ zur Größe desInhaltskastens des Containerelements berechnet. Das Verhalten ist wohldefiniert und konsistent über Layout-Modi hinweg, wenn die Containergröße bestimmt ist. Da diese drei Layout-Modi (Mehrspalten, Flex und Grid) zyklische Prozentsatzgrößen unterschiedlich behandeln, verhält sichgap ebenfalls so. Im Grid-Layout werden zyklische Prozentsatzgrößen für die Bestimmung derintrinsischen Größe auf null aufgelöst, aber beim Anordnen der Inhalte gegen den Inhaltskasten des Elements aufgelöst. Zwei Beispiele unten zeigen prozentuale Gap-Werte mitexpliziter Containergröße undimpliziter Containergröße im Beispielabschnitt.

Frühere Versionen der Spezifikation nannten diese Eigenschaftgrid-gap, und um die Kompatibilität mit älteren Websites beizubehalten, akzeptieren Browser weiterhingrid-gap als Alias fürgap.

Formale Definition

Formale Syntax

gap =
<'row-gap'><'column-gap'>?

<row-gap> =
normal|
<length-percentage [0,∞]>

<column-gap> =
normal|
<length-percentage [0,∞]>

<length-percentage> =
<length>|
<percentage>

Beispiele

Flex-Layout

HTML

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS

#flexbox {  display: flex;  flex-wrap: wrap;  width: 300px;  gap: 20px 5px;}#flexbox > div {  border: 1px solid green;  background-color: lime;  flex: 1 1 auto;  width: 100px;  height: 50px;}

Ergebnis

Grid-Layout

HTML

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS

#grid {  display: grid;  height: 200px;  grid-template: repeat(3, 1fr) / repeat(3, 1fr);  gap: 20px 5px;}#grid > div {  border: 1px solid green;  background-color: lime;}

Ergebnis

Mehrspalten-Layout

HTML

<p>  This is some multi-column text with a 40px column gap created with the CSS  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!</p>

CSS

.content-box {  column-count: 3;  gap: 40px;}

Ergebnis

Prozentualer Gap-Wert und explizite Containergröße

Wenn der Container eine festgelegte Größe hat, basieren die Berechnungen des prozentualen Gap-Wertes auf der Größe des Containers. Somit ist das Verhalten des Gaps über alle Layouts hinweg konsistent. Im folgenden Beispiel gibt es zwei Container, einen mit Grid-Layout und einen mit Flex-Layout. Die Container haben fünf rote 20x20px Kinder. Beide Container sind explizit auf 200px Höhe mitheight: 200px gesetzt und der Gap ist mitgap: 12.5% 0 gesetzt.

<span>Grid</span><div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div><span>Flex</span><div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div>

body > div {  background-color: #cccccc;  width: 200px;  flex-flow: column;}

#grid {  display: inline-grid;  height: 200px;  gap: 12.5% 0;}#flex {  display: inline-flex;  height: 200px;  gap: 12.5% 0;}#grid > div,#flex > div {  background-color: coral;  width: 20px;  height: 20px;}

Untersuchen Sie nun die Grid- und Flex-Elemente mit demInspector-Tab in den Web Developer Tools. Um die tatsächlichen Gaps zu sehen, bewegen Sie die Maus über die<div> und<div> Tags im Inspector. Sie werden feststellen, dass der Gap in beiden Fällen derselbe ist, nämlich 25px.

Prozentualer Gap-Wert und implizite Containergröße

Wenn die Größe nicht explizit auf dem Container festgelegt ist, verhält sich der prozentuale Gap im Fall von Grid- und Flex-Layouts unterschiedlich. Im folgenden Beispiel haben die Container keine explizit festgelegte Höhe.

<span>Grid</span><div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div><span>Flex</span><div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div>

body > div {  background-color: #cccccc;  width: 200px;}#grid {  display: inline-grid;  gap: 12.5% 0;}#flex {  display: inline-flex;  gap: 12.5% 0;  flex-flow: column;}#grid > div,#flex > div {  background-color: coral;  width: 20px;  height: 20px;}

Im Fall des Grid-Layouts trägt der prozentuale Gap nicht zur tatsächlichen Höhe des Grids bei. Die Höhe des Containers wird unter Verwendung eines0px Gaps berechnet, sodass sich die tatsächliche Höhe auf 100px (20px x 5) beläuft. Dann wird der tatsächliche prozentuale Gap unter Verwendung der Höhe des Inhaltkastens berechnet, der Gap beläuft sich auf12.5px (100px x 12.5%). Der Gap wird kurz vor dem Rendern angewendet. Somit bleibt das Grid 100px hoch, aber es überläuft aufgrund des später genau vor dem Rendern hinzugefügten prozentualen Gaps.

Im Fall des Flex-Layouts ergibt der prozentuale Gap immer einen Nullwert.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• row-gap
• column-gap
• Grundkonzepte des Grid-Layouts: Rinnen
• CSS-Box-Ausrichtung Modul
• CSS Flexibles Box-Layout Modul
• CSS Grid-Layout Modul
• CSS Mehrspalten-Layout Modul