Propriété CSS column-gap
La propriété column-gap définit la longueur de l'espacement entre les colonnes.
La propriété column-gap fait partie des propriétés CSS3.
Elle accepte le mot-clé normal ou une valeur <length>. normal est la valeur par défaut. L'espacement peut être spécifié en em, px ou pourcentages. La propriété prend également en charge les mots-clés standards initial et inherit.
INFO
Les préfixes fournisseurs ne sont plus nécessaires pour les navigateurs modernes. La prise en charge native est disponible dans tous les principaux navigateurs.
Lorsqu'une règle de colonne est utilisée entre les colonnes, elle se place au milieu de l'espacement.
| Valeur initiale | normal |
|---|---|
| S'applique à | Éléments multi-colonnes, conteneurs flex, conteneurs grid. |
| Héritée | Non. |
| Animable | Oui. La longueur de l'espacement entre les colonnes est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnGap = "100px"; |
Syntaxe
Syntaxe de la propriété CSS column-gap
column-gap: length | normal | initial | inherit;Exemple de la propriété column-gap :
Exemple de la propriété CSS column-gap avec la valeur normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: normal;
}
</style>
</head>
<body>
<h2>The column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Exemple de la propriété column-gap avec la valeur "length" :
Exemple de la propriété CSS column-gap avec la valeur length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
}
</style>
</head>
<body>
<h2>Column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| normal | Taille d'espacement par défaut entre les colonnes. |
| length | Spécifie la longueur qui définit l'espacement entre les colonnes. Peut être spécifiée en em, px ou pourcentages. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Pratique
Quelle est l'utilité de la propriété column-gap en CSS ?