Régler les marges et les espaces
Trois réglages créent de l’espace, mais ils ne répondent pas à la même question. Choisissez d’abord où vous voulez ajouter cet espace.
1. Identifier le bon réglage
| Vous voulez… | Réglage | Élément à sélectionner |
|---|---|---|
| Éloigner le contenu du bord d’une carte | Marge intérieure | La carte |
| Éloigner la carte de ce qui l’entoure | Marge | La carte |
| Espacer régulièrement les cartes entre elles | Écart | Leur conteneur Flex ou Grid |
Imaginez une carte contenant un titre. La marge intérieure est l’espace entre le bord de la carte et le titre. La marge se trouve à l’extérieur de la carte. L’écart est l’espace commun organisé par le parent entre plusieurs cartes.
2. Donner de l’air dans une carte
Dans Expert, sélectionnez la carte, puis ouvrez Espacement → Marge intérieure. Ajoutez le réglage avec le + du groupe si nécessaire.
Commencez avec une valeur commune aux quatre côtés. Passez à des côtés séparés seulement si vous avez besoin d’un espace différent en haut, en bas ou sur les côtés.
3. Espacer un élément de ses voisins
Sélectionnez l’élément puis réglez Espacement → Marge. Pour séparer un titre du paragraphe qui le suit, une marge en bas du titre peut être adaptée.
Pour une liste entière, évitez d’accumuler des marges individuelles sans raison : un Écart commun sur le parent est souvent plus simple à maintenir.
4. Espacer les enfants d’une disposition
Sélectionnez leur parent Flex ou Grid. Réglez Mise en page → Écart.
Un écart commun agit sur les deux directions. Le mode séparé permet de distinguer l’écart horizontal et vertical, utile notamment pour une grille.
5. Comprendre une valeur qui semble trop grande
Plusieurs espaces peuvent s’additionner : marge extérieure d’une carte, marge intérieure du parent et écart entre ses enfants. Vérifiez les trois emplacements avant de réduire les valeurs au hasard.
Une marge verticale entre des éléments dans une disposition normale peut aussi se combiner avec celle de son voisin selon les règles du navigateur. Une somme de marges n’est donc pas toujours la distance finalement observée.
6. Vérifier le mobile et le retrait
Comparez les cadres. Un espace confortable sur ordinateur peut occuper trop de place sur un petit écran. Utilisez une règle d’écran pour adapter la valeur si nécessaire.
Retirez un réglage avec sa commande de retrait plutôt qu’en remplaçant toutes les valeurs par zéro. Zéro est une valeur explicite ; retirer la valeur permet aux autres règles applicables de reprendre leur rôle.
Centrer du texte et centrer un bloc sont deux opérations différentes. L’alignement du texte agit sur le texte ; le placement du bloc dépend de son parent, de ses dimensions et éventuellement de ses marges.