La propriété column-gap
permet de définir l'espace entre les colonnes lorsqu'on utilise une disposition en colonnes.
Valeur initiale | normal |
---|---|
Applicabilité | éléments sur plusieurs colonnes |
Héritée | non |
Média | visuel |
Valeur calculée | la longueur absolue ou le mot-clé normal |
Animable | oui, comme une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeur avec un mot-clé */ column-gap: normal; /* Valeurs de longueur */ /* Type <length> */ column-gap: 3px; column-gap: 2.5em; /* Valeurs globales */ column-gap: inherit; column-gap: initial; column-gap: unset;
Valeurs
normal
- Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. La spécification indique que cette valeur est équivalente à
1em
. <length>
- Une valeur de longueur (type
<length>
) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
Syntaxe formelle
<length> | normal
Exemples
CSS
.content-box { border: 10px solid #0ff; -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em; }
HTML
<div class="content-box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Multi-column Layout Module La définition de 'column-gap' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | (Oui)-webkit 50.0 |
1.5 (1.8)-moz[1] | 10 | 11.10 | 3.0 (522)-webkit |
Fonctionnalité | Android | Webview Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple | ? | (Oui)-webkit 50.0 |
(Oui) | ? | ? | ? |
[1] Avant Firefox 3 (Gecko 1.9), la valeur par défaut associée au mot-clé normal
était 0
et non 1em
.