CSS/Eigenschaften/gap

Browserunterstützung
caniuse.com

Die Eigenschaft gap (grid-gap) ist die Zusammenfassung der Eigenschaften row-gap und column-gap, die die gutters (engl. für Rinnen), d. h. die Abstände zwischen den einzelnen Spalten und Reihen festlegt.
Ursprünglich war sie als grid-gap für Grid Layout vorgesehen, ist jetzt aber auch für Flexbox und Mehrspaltenlayout (columns) standardisiert.

Erlaubte Werte

row-gap column-gap

Die Angabe für column-gap kann weggelassen werden, der angegebene Wert gilt dann für Zeilen- und Spaltenabstand.

Zulässig pro Wert ist

• eine nicht negative Längenangabe
• eine Prozentangabe
• normal: Dies entspricht in Flexbox und Grid einem Abstand von 0px, in einem Mehrspaltenlayout dagegen einem Spaltenabstand von 1em (einen Zeilenabstand gibt es hier nicht).

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

#grid {
  display: grid;
  height: 20em;
  grid-gap: 2em 1em;
}

Der erste Wert legt den Abstand zwischen Reihen, der zweite Wert den Abstand zwischen den Spalten fest.

Siehe auch

• CSS/Tutorials/Boxmodell/Außen- und Innenabstand
  gap, margin und padding
• Grid Layout
• CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#Abst.C3.A4nde:_margin_vs_gap
  Spalten (gutter) mit gap
• CSS/Tutorials/Flexbox/Ausrichtung
• Typografie/Spalten
  • column-rule-width und gap
    ehemals column-gap, jetzt auch mit gap möglich

Weblinks

• Spezifikation (CSSWG): row-gap column-gap
• Details: caniuse.com