CSS-Eigenschaft column-gap

Die Eigenschaft column-gap efiniert die Länge des Zwischenraums zwischen den Spalten. Sie wird durch zwei Werte angegeben: normal und length. "Normal" ist der Standardwert. Der Abstand zwischen den Spalten ist normal. "Gap" kann durch em, px und Prozentwerte angegeben werden.

Es wurden einige Eigenschaftserweiterungen hinzugefügt: -webkit- für Safari, Google Chrome und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera usw.
Anfangswert normal
Gilt für Mehrspalten-Elemente, Flexcontainer, Gittercontainer
Geerbt Nein
Animierbar Ja, die Länge des Spaltenzwischenraums ist animierbar.
Version CSS3
DOM Syntax object.style.columnGap = "100px";

Syntax

column-gap: length | normal | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      -webkit-column-gap: normal; /* Chrome, Safari, Opera */
      -moz-column-gap: normal; /* Firefox */
      column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft column-gap</h2>
    <div>
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Hier ist der Zwischenraum durch den Wert "length" (30px) eingestellt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
      -moz-column-gap: 30px; /* Firefox */
      column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft column-gap</h2>
    <div>
  Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Werte

Wert Beschreibung
normal Die angegebene Länge zwischen den Spalten ist normal. Es wird ein 1em-Wert vorgeschlagen. Das ist der Standardwert.
length Gibt die Länge an, die den Abstand zwischen der Spalte bestimmt. Kann durch em, px und Prozentwerte angegeben werden.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.5+ 3.0+ 11.1+

Übe dein Wissen

Welche Aussage(n) über die CSS-Eigenschaft 'column-gap' ist/sind korrekt?
Finden Sie das nützlich?