Gap, column-gap et row-gap.
Résumé des caractéristiques de la propriété gap
normal
normal
gap
passe progressivement d'une valeur à une autre.Schéma syntaxique de gap
.
gap
, column-gap
et row-gap
Les liens du schéma donnent accès à plus de détails.
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
length
est une valeur numérique suivie d'une des unités de dimension.%
est un pourcentage dont l'évaluation correspond à une dimension.
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
.
- 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 des unités 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; (
normal
) gap: inherit; gap: revert; gap: revertLayer; gap: unset;Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs :
initial
,inherit
,revert
,revert-layer
,unset
.
Animation de la propriété 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.
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.
Modifier les espacements avec gap
et 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
.

let el = document.getElementById('id');
el.style['gap'] = '5px';
// ou
let el = document.getElementById('id');
el.style.gap = '5px';
Relire les espacements en Javascript.
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 retourne la valeur de gap
dans la même unité que celle utilisée pour la définir.

let el = document.getElementById('id');
let value = el.style['gap'];
// ou
let el = document.getElementById('id');
let value = 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, 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, et, en dernier recours, la valeur initiale de la propriété (
dans
le cas de normal
gap
).

let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('gap');
Modifier la valeur des espacements avec JQuery.

$('#id').css('gap', '5px');
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é.

let value = $('#id').css('gap');
Autres exemples de code.
Vous trouverez d'autres exemples de code en Javascript et JQuery sur la page Javascript et CSS, toujours pour manipuler le CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété gap
et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de gap
. On constate en particulier
que les pourcentages sont bien mémorisés en tant que pourcentages mais que toutes les autres unités sont converties en pixels.
Simulateur avec la propriété gap
.
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
.
Prise en charge de gap
par les navigateurs.
La prise en charge des propriétés row-gap
, column-gap
et de la propriété raccourcie gap
est globalement bonne.
column-gap
, row-gap
et de la propriété résumée gap
, dans le contexte d'un conteneur grille.column-gap
, row-gap
et de la propriété résumée gap
, dans le contexte d'un conteneur flex-box.column-gap
, row-gap
et de la propriété résumée gap
, dans le contexte d'un conteneur multi-colonnes.gap
(grille)
gap
(flex-box)
gap
(colonnes)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini
Historique de la propriété gap
.
-
Module CSS - Mise en page par grille - Niveau 1
Définition des propriétésrow-gap
,column-gap
etgap
dans le contexte d'une grille.07 Avril 2011Document de travail.29 Septembre 2016Candidat à la recommandation. -
Module CSS - Mise en page multi-colonnes - Niveau 1
Définition des propriétésrow-gap
,column-gap
etgap
dans le contexte d'une mise en page multi-colonnes.23 Juin 1999Document de travail.17 Décembre 2009Candidat à la recommandation. -
Module CSS - Mise en page par grille - Niveau 2
Pas de changement concernant les propriétésrow-gap
,column-gap
etgap
.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Alignement des blocs - Niveau 3
Les propriétés de positionnement et de dimensionnement des blocs sont maintenant regroupées dans le module " Box Alignment".12 Juin 2012Document de travail.
Autres propriétés de positionnement, d'alignement ou de dimensionnement des blocs.
Toutes ces propriétés sont maintenant regroupées dans la spécification "module CSS - Alignement des blocs" (CSS Box Alignment Module).