CSS-Eigenschaft column-gap

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.