Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

row-gap, column-gap et gap.

gap
row-gap
column-gap

Résumé des caractéristiques de la propriété gap

Description rapide
Définit les espacements entre les lignes et entre les colonnes (grille, flex-box, colonnes).
Statut
Standard
Type de valeur
Dimension+ {1-2} | Pourcentage+ {1-2}
Valeurs prédéfinies
normal
Pourcentages
Calculés par rapport aux dimensions de l'élément.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété gap passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CR (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété gap et dérivées.

gap définit l'espacement entre les lignes et entre les colonnes dans le contexte d'une grille, d'un flex-box ou d'une mise en page en colonnes. Les tableaux ne sont pas concernés par cette propriété. gap est une propriété résumée qui est équivalente aux deux propriétés suivantes :

  • row-gap : espacement vertical, entre les lignes.
  • column-gap : espacement horizontal, entre les colonnes.

Notez aussi les propriétés synonymes, initialement définies pour les grilles, mais qui peuvent maintenant être oubliées au profit des propriétés plus générales :

  • grid-row-gap propriété équivalente à row-gap.
  • grid-column-gap équivalente à column-gap.
  • grid-gap équivalente à gap.

Cas d'une grille.

Dans le cas d'une grille, column-gap et row-gap définissent les espacements horizontaux et verticaux entre les cellules de la grille.

Pour une présentation plus détaillée des grilles, reportez-vous à la page Présentation générale des grilles.

Cas d'un flex-box.

Les propriétés column-gap et row-gap définissent les espacements horizontaux et verticaux entre les éléments du flex-box.

Pour une présentation plus détaillée des flex-box, reportez-vous à la page sur les flex-box.

Cas d'une mise en page multi-colonnes.

L'espace entre deux colonnes de texte prend le nom de "gouttière". gap définit donc la largeur de la gouttière. row-gap est sans effet dans ce cas. Si une ligne de séparation est tracée entre les colonnes (voir column-rule) son épaisseur est prise sur celle définie par gap, la largeur de la gouttière ne sera donc pas augmentée par la présence d'une ligne.

Pour une présentation générale des mises en page en colonnes, reportez-vous aux explications sur la page Tutoriel sur les mises en page multi-colonnes.

Valeurs pour gap.

  • length est une valeur numérique suivie d'une unité de dimension.
  • % est un pourcentage dont l'évaluation correspond à une dimension.
Syntaxe de gapSchéma syntaxique de la propriété CSS gap (espacement entre les colonnes, les cellules d'une grille ou les cellules d'un tableau). normal normal length/ % length/ % normal normal length/ % length/ %gap:;gap:;
  • gap: normal;

    Définit les espacements à 0 s'il s'agit d'une grille ou d'un conteneur flex, et à 1em s'il s'agit d'une mise en page en colonnes.

  • gap: 5px 8px; lig col

    La première valeur indique l'espacement entre les lignes, la deuxième valeur est l'espacement entre les colonnes. Ce sont deux valeurs positives ou nulles, suivie d'une unité de dimension.
    Si une seule valeur est indiquée, elle s'applique aux deux espacements.

    Les pourcentages sont calculés par rapport à la hauteur de l'élément pour la première valeur et par rapport à la largeur de l'élément pour la deuxième valeur.

  • row-gap: 5px; column-gap: 10px;

    Les propriétés détaillées peuvent être utilisées si on ne souhaite définir que l'un des espacements horizontal ou vertical. Par exemple, dans le cas d'une mise en page en colonnes, on utilisera plutôt column-gap.

  • gap: initial; gap: inherit; gap: revert; gap: revert-layer; gap: unset;

    La valeur initiale est : normal.

Animation de gap.

Comme la plupart des propriétés qui acceptent des valeurs numériques, gap peut être animée de façon progressive. Le résultat visuel n'est pas particulièrement intéressant. Voici ce que cela donne sur une mise en page en colonnes.

Lorsqu'un texte est mis en page sur plusieurs colonnes, l'espace entre les colonnes prend le nom de "gouttière" (terme utilisé par les imprimeurs et typographes). En CSS, la largeur de la gouttière est déterminée par la propriété gap.
Pour cette démonstration, cette propriété a été animée. Vous pouvez consulter le code de l'animation et les règles appliquées à cet élément en cliquant sur le bouton ci-dessus.

Manipulation de la propriété gap par programme.

Les exemples de code donnés ci-après travaillent sur la petite grille présentée ci-dessous.

Modifier la valeur de gap en Javascript.

Deux syntaxes Javascript permettent de modifier la valeur d'une propriété. L'exemple applique une valeur de 5 pixels à la propriété gap.


function setGap(el) {
el.style['gap']='5px';
// ou
el.style.gap='5px';
}

Lire en Javascript la valeur de gap.

Le code ci-dessous lit la valeur de la propriété gap qui a été affectée dans le code HTML, avec l'attribut style. Si la valeur a été affectée via un sélecteur CSS, elle ne sera pas renvoyée. Ce code renvoie la valeur de gap dans la même unité que celle utilisée pour la définir.


function getGap(el) {
alert(el.style['gap']);
// ou
alert(el.style.gap);
}

Lire la valeur calculée de gap en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier des pourcentages), et de la résolution de la cascade des héritages. Ce sera, dans l'ordre des priorités, la valeur affectée via l'attribut style, la valeur affectée via un sélecteur CSS ou une valeur héritée, la valeur initiale de la propriété (normal dans le cas de gap).

Si la valeur a été définie dans une unité quelconque (pouces, centimètres, viewport, etc.), elle est convertie en pixels. Cependant si la valeur a été définie en pourcentages, elle est renvoyée également en pourcentages.


function getCalcGap(el) {
alert(window.getComputedStyle(el).getPropertyValue('gap'));
}

Modifier la valeur de la propriété gap avec JQuery.


function setGap(el) {
$(el).css('gap','2%');
}

Lire la valeur calculée de la propriété gap avec JQuery.

Comme en Javascript, la valeur est renvoyée en pixels, même si elle a été définie dans une autre unité.


function getCalcGap(el) {
return $(el).css('gap');
}

Simulateur.

L'effet de gap est présenté sur une grille, sur un flex-box et sur une mise en page en colonnes.
On voit que la valeur par défaut normal n'est pas la même dans le cas de figure. Pour une mise en page en colonnes, normal vaut à peu près 1em, tandis que normal vaut zéro dans le cas d'une grille ou d'un flex-box.

Attention ! Dans le cas d'un flex-box, la propriété justify-content peut ajouter des espacements supplémentaires pour réaliser la justification des éléments, particulièrement avec les valeurs space-around, space-between et space-evenly.

gap :
Grille
1
2
3
4
5
6
7
8
9
10
11
12
Flex-box
1
2
3
4
5
6
7
8
9
10
Colonnes
La mise en page sous forme de plusieurs colonnes est nécessaire lorsque les lignes de texte sont longues par rapport à la taille des caractères. L'œil a alors du mal à suivre la ligne d'un bout à l'autre, ce qui occasionne une fatigue oculaire plus importante. Cette disposition est la mise en page habituellement retenue par les journaux. L'espace entre les colonnes doit être suffisant pour que ces dernières soient clairement identifiables au premier coup d'œil. La justification du texte (comme dans cet exemple) améliore également la délimitation visuelle des colonnes.

Prise en charge par les navigateurs (compatibilité).

La prise en charge des propriétés row-gap, column-gap et de la propriété raccourcie gap est globalement bonne.

Colonne 1
Support de la propriété CSS pour gérer l'espacement des cellules dans un conteneur grille.
Colonne 2
Support de la propriété CSS pour gérer l'espacement des éléments dans le contexte d'un flex-box.
Colonne 2
Support de la propriété CSS pour gérer l'espacement des colonnes dans le cas d'une mise en page multi-colonnes.
1
gap
(Grid)
2
gap
(Flex-box)
3
gap
(Columns)
Estimation de la prise en charge en pourcentage du parc actuel.
93%
91%
75%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que gap.

Les spécifications CSS éditées par le W3C sont organisées en modules. gap fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Disposition des lignes dans un flex-box ou une grille.
Disposition verticale des éléments dans un flex-box ou une grille.
Position verticale de l'un des éléments dans un flex-box ou une grille.
Définit l'espacement entre les colonnes.
Ajuste l'espacement des colonnes dans une grille.
Ajuste l'espacement des lignes et des colonnes dans une grille.
Ajuste l'espacement des lignes dans une grille.
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
Gère l'alignement horizontal des éléments dans un conteneur grille.
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
Disposition des éléments dans un flex-box ou une grille.
Défini le placement des éléments dans leur cellule (grille).
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
Définit l'espace entre les lignes d'une grille.