Propriété CSS column-gap

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.