column-gap CSS propriété

Définition de la CSS column-gap.

La propriété de gouttière CSS column-gap permet de spécifier l'espace entre chaque colonne au sein d'un container de type de Grid Css, Flex Css ou Multi-Column Css.

Exemple d'écriture CSS de column-gap :

column-gap : normal;
column-gap : 2px;
column-gap : 30%;

La propriété de feuille de style column-gap CSS peut prendre la valeur de :

normal : utilise l'espacement par défaut définit par le navigateur (généralement 1em). Valeur par défaut.
numérique : nombre entier positif suivie de px ou pt ou em, ..., qui spécifie l'espace entre les colonnes.
numérique positif suivi de % (pourcentage). La valeur est calculée en fonction de la valeur calculée de sa propriété CSS width du container.

Exemple de code column-gap CSS

Conditions d'application de la CSS column-gap.

La propriété column-gap CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont le container Grid Css (display:[inline-]grid), Flex Css (display:[inline-]flex) ou Multi-Column Css (column[-*]).

La valeur de la CSS column-gap peut être mise directement dans la propriété de raccourci CSS gap.

Héritage des valeurs Css de column-gap.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style column-gap.

Problème d'interprétation de column-gap en Css.

La propriété CSS column-gap n'est reconnue que par Internet Explorer 10+ et Opera 11.1+ (06-2015).

Conditions d'animation de column-gap en CSS3.

La CSS column-gap est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Compatibilités navigateurs de la propriété column-gap

Détails des versions de la CSS column-gap: Propriété column-gap est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS column-gap: Propriété CSS column-gap est compatible à partir de Chrome 57; Propriété CSS column-gap est compatible à partir de Firefox 52; Propriété CSS column-gap est compatible à partir de Internet Explorer 10; Propriété CSS column-gap est compatible à partir de Internet Explorer ou Edge 16; Propriété CSS column-gap est compatible à partir de Opera 11.1; Propriété CSS column-gap est compatible à partir de Safari 10; Propriété CSS column-gap est compatible à partir de Chrome Android 50; Propriété CSS column-gap est compatible à partir de Firefox Android 52; Propriété CSS column-gap est compatible sous une forme préfixée avec iOS Safari 3; Propriété CSS column-gap est compatible à partir de iOS Safari 10

Propriétés CSS préfixées de column-gap

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété column-gap CSS :

Pour le container de type Multi-Column Css (column[-*]) :

Pour la version de Firefox 9+ vous pouvez utiliser la version préfixée : -moz-column-gap
Pour la version de Chrome et Safari 3+ vous pouvez utiliser la version préfixée : -webkit-column-gap

Exemple de code column-gap avec propriétés préfixées :

-webkit-column-gap : 3em;
-moz-column-gap : 3em;
column-gap : 3em;

Pour le container de type Grid Css (display:[inline-]grid) :
La première spécification W3c utilisait grid-column-gap.

Exemple de code column-gap pour les grilles Css :

grid-column-gap : 3em;
column-gap : 3em;

Votre avis sur la définition column-gap en CSS

Votez pour la définition CSS `column-gap`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.