column-gap |
Écart de colonnes |
| CSS3 |
|
Syntaxe
|
column-gap: longueur|normal|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| longueur |
Ce paramètre permet d'indiquer la largeur entre les colonnes. |
| normal |
Ce paramètre permet d'indiquer que l'écart doit être normal entre les colonnes, soit 1em. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer l'écart entre les colonnes.
Remarques
- Définition et utilité : La propriété column-gap détermine l'espace horizontal entre les colonnes dans un layout multi-colonnes. Elle joue un rôle clef dans
l'apparence visuelle d'un contenu divisé en colonnes en créant une séparation claire entre elles.
- Valeurs acceptées : column-gap peut être défini en utilisant des unités absolues (comme px, pt, ou cm) ou relatives (comme %, em, ou rem). Cela permet une
grande flexibilité pour s'adapter à des designs responsifs ou fixes.
- Valeur par défaut : Par défaut, si aucune valeur n'est spécifiée, les navigateurs appliquent un espacement automatique, étant souvent équivalent à 1em. Cependant,
cela peut varier légèrement entre les navigateurs Web.
- Interaction avec d'autres propriétés : La propriété column-gap fonctionne en tandem avec column-count et column-width. Par exemple, si le nombre
ou la largeur des colonnes est élevé, un espacement suffisant entre elles améliore la lisibilité.
- Équilibre entre lisibilité et design : Un column-gap trop petit peut rendre le contenu difficile à lire, car les colonnes semblent trop proches. À l'inverse,
un espacement trop large peut donner une apparence déséquilibrée ou gaspiller de l'espace.
- Compatibilité avec row-gap : Depuis CSS3, column-gap est un alias de la propriété générique gap, utilisée pour définir à la fois les espaces entre
les colonnes et les lignes dans les conteneurs en grille ou en flexbox.
- Compatibilité des navigateurs : column-gap est bien pris en charge par tous les navigateurs Web modernes, mais certains anciens navigateurs nécessitent des
préfixes comme -webkit-column-gap. Avec gap, la compatibilité est encore meilleure pour les conteneurs flexibles.
- Effet visuel avec les séparateurs : Lorsque column-rule est utilisé pour dessiner une ligne entre les colonnes, la largeur du column-gap influence
directement l'espace occupé par cette ligne. Cela permet de jouer sur le style et l'espacement pour un design plus esthétique.
Dernière mise à jour : Dimanche, le 20 décembre 2015
