We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

La propriété column-gap permet de définir l'espace entre les colonnes lorsqu'on utilise une disposition en colonnes.

Syntaxe

/* Valeur avec un mot-clé */
column-gap: normal; 

/* Valeurs de longueur */
/* Type <length>       */
column-gap: 3px;
column-gap: 2.5em;

/* Valeurs de pourcentage */
/* Type <percentage> */
column-gap: 3%;

/* 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.
<percentage>
Une valeur de pourcentage (type <percentage> 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

normal | <length-percentage>


<length-percentage> = <length> | <percentage>

Exemples

CSS

.content-box {
  border: 10px solid #0ff;
  column-width: 100px;
  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.
Version de travail Définition initiale.

Valeur initialenormal
Applicabilitémulti-column elements, flex containers, grid containers
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Médiavisuel
Valeur calculéeas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

50

Oui -webkit-

12

12 -webkit-

52

1.5 -moz- 1

10

11.1

15 -webkit-

3 -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui50

Oui

Oui -webkit-

52

4 -moz-

? ?5.0

1. Before Firefox 3, the default value for the normal keyword was 0 and not 1em.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mrstork, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,