row-gap, column-gap et gap.
Résumé des caractéristiques de la propriété gap
normal
normal
gap
passe progressivement d'une valeur à une autre.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.
- 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
. 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.
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é (
dans le cas de normal
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
.
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.
gap
(Grid)
gap
(Flex-box)
gap
(Columns)
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.