Propriété CSS column-gap

La propriété column-gap définit la longueur du trou entre les colonnes. Elle est spécifiée par deux valeurs: normal et length. "Normal" est la valeur initiale. Le trou entre les colonnes est normal. "Gap" peut être spécifiée par em, px et pourcentages.

Quelques extensions de la propriété sont ajoutées, telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les plus anciennes versions d'Opera etc.
Valeur initiale normal
Appliquée à Éléments multi-colonnes, conteneurs flex, conteneurs grid.
Héritée Non.
Animable Oui. La longueur du trou des colonnes est animable.
Version CSS3
Syntaxe DOM object.style.columnGap = "100px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de la propriété column-gap</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Ici, le trou est défini par la valeur "length" (30px).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de la propriété column-gap</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Valeurs

Valeur Description
normal La longueur spécifiée entre les colonnes est normale. La valeur 1em est recommandée. C'est la valeur initiale.
length Spécifie la longueur qui définit le trou entre les colonnes. Cela peut être spécifié par em, px et pourcentages.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1.5+ 3.0+ 11.1+


Trouvez-vous cela utile?

Articles Associées