row-gap
Définit l’espace entre les lignes d’un conteneur flex ou grid.
- Valeur initiale
normal- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- conteneurs flex, grid et multi-colonnes
- JavaScript
element.style.rowGap = "20px"
Exemple
#.form {
display: grid;
row-gap: 14px;
}<form class="form stage">
<input placeholder="Prénom">
<input placeholder="E-mail">
<button type="submit">S’inscrire</button>
</form>Définition et utilisation
#La propriété row-gap ajoute de l’espace entre les lignes successives, c’est-à-dire à la verticale dans le sens d’écriture habituel. Dans un conteneur flex, elle n’a d’effet que lorsque les éléments reviennent à la ligne sur plusieurs lignes.
Elle fait partie du raccourci gap. Utilisez-la seule quand vous voulez changer uniquement l’espace vertical, par exemple sur des écrans plus petits.
L’ancien nom grid-row-gap fonctionne toujours comme alias dans les navigateurs, mais dans du nouveau code, écrivez simplement row-gap.
Syntaxe
#row-gap: normal | <longueur> | <pourcentage>;Valeurs
#Valeurs en pratique
#normal
.demo { row-gap: normal; }8px
.demo { row-gap: 8px; }28px
.demo { row-gap: 28px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Le plus simple pour régler les espaces verticaux entre les champs d’un formulaire, c’est
display: gridetrow-gap. - Dans un conteneur flex à une seule ligne,
row-gapne change rien, car il n’y a pas de deuxième ligne.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.