Régler l’espace entre les éléments d’une disposition

Écart donne une distance régulière entre les enfants d’un conteneur Flex ou Grid. Il ne crée pas un espace entre le bord du conteneur et son contenu.

1. Sélectionner le parent

Ouvrez Calques, puis sélectionnez le conteneur des éléments à espacer. Dans Expert → Mise en page, retrouvez Écart.

Si le réglage n’est pas proposé, vérifiez d’abord l’Affichage : Écart concerne les dispositions Flex et Grid. Sélectionner un texte à l’intérieur d’une carte ne sélectionne pas nécessairement le groupe des cartes.

2. Choisir une valeur commune

Ouvrez la valeur d’Écart et choisissez une proposition. Le sélecteur indique une valeur et son unité ; regardez l’unité affichée plutôt que de supposer que le nombre est en pixels.

Dans la démonstration, la proposition 4 correspond à 1 rem, soit 16 px avec la taille de référence utilisée. Ce rapport dépend de la taille de référence du site : 4 ne signifie pas 4 px.

Vous pouvez aussi utiliser le champ numérique et les unités proposés pour une valeur personnalisée.

3. Séparer horizontal et vertical

Utilisez le bouton de regroupement du réglage pour passer à deux valeurs :

• l’écart horizontal sépare les colonnes ou les éléments voisins sur une rangée ;
• l’écart vertical sépare les lignes.

Cette séparation est particulièrement utile quand une grille doit avoir des colonnes proches, mais des lignes plus aérées. Sur une rangée qui ne revient jamais à la ligne, modifier l’écart vertical peut n’avoir aucun effet visible.

4. Adapter l’écart à une taille d’écran

Ajoutez une règle sur Écart. Gardez une valeur de base confortable pour le mobile, puis une autre valeur à partir de la largeur souhaitée.

La règle appartient au réglage du parent. Elle ne transforme pas les marges de chacun de ses enfants.

Voir l’écart adapté à la largeur.

5. Retirer l’écart et comprendre le résultat

La commande de retrait supprime la valeur concernée sur sa portée. Une valeur de base peut donc redevenir visible après le retrait d’une règle d’écran.

Si une distance demeure entre les éléments, vérifiez les marges des enfants et la répartition de l’espace libre par les alignements. Ils peuvent également produire de l’espace.

Pour l’espace entre le contenu et son bord, utilisez plutôt la marge intérieure.