Régler les marges et centrer un bloc
La marge crée un espace à l’extérieur d’un élément. Elle sert par exemple à éloigner une rangée de boutons du texte qui la précède.
1. Sélectionner l’élément à espacer
Sélectionnez l’élément dans le rendu ou les Calques, puis ouvrez Expert → Espacement → Marge.
Choisissez le côté qui doit s’éloigner de son voisin : haut, bas, gauche ou droite. Le repère du contrôle aide à identifier ce côté.
2. Choisir une valeur
Lecture impossible. Réessayez avec les commandes vidéo.
Ouvrez le sélecteur du côté et choisissez une proposition, ou utilisez les champs et unités disponibles.
Dans la démonstration, la marge supérieure passe à 2 rem, soit 32 px avec la taille de référence du site.
Une marge ne crée pas d’espace à l’intérieur de l’élément. Si le texte touche le bord d’une carte, modifiez plutôt sa Marge intérieure.
3. Regrouper les côtés
Le menu de regroupement propose des côtés séparés, le regroupement gauche/droite, le regroupement haut/bas et celui des deux axes.
Choisissez un regroupement lorsque les deux côtés doivent partager la même valeur. Après la transformation, vérifiez les valeurs affichées et le résultat. Pour conserver des côtés différents, utilisez le mode séparé.
4. Centrer un bloc
Lecture impossible. Réessayez avec les commandes vidéo.
Une marge automatique à gauche et à droite peut centrer un bloc lorsqu’il occupe moins que la largeur disponible et que sa disposition le permet.
Dans la démonstration, nous réglons d’abord la Largeur sur Fit, pour adapter le bloc à son contenu. Nous regroupons ensuite les marges par axe, puis choisissons auto sur l’axe horizontal. Le texte à l’intérieur du bloc conserve son alignement.
Si l’élément remplit déjà toute la largeur, vous ne verrez pas nécessairement de déplacement. Vérifiez ses dimensions avant d’ajouter des valeurs de marge de plus en plus grandes.
Pour centrer un texte dans son élément, utilisez l’alignement du texte. Pour placer un enfant dans un parent Flex ou Grid, les alignements du parent sont souvent plus adaptés.
5. Saisir une marge négative
Lecture impossible. Réessayez avec les commandes vidéo.
Pour utiliser le champ libre, ouvrez les propositions du côté ou de l’axe. Si une proposition est active, cliquez de nouveau dessus pour la retirer. Le champ permet alors de saisir une valeur et de choisir son unité.
Dans la démonstration, nous saisissons -16 avec l’unité px sur l’axe vertical. Les marges du haut et du bas deviennent négatives. Une valeur 24 px les rend ensuite positives. Le signe moins fait partie de la valeur : ne le saisissez pas dans un autre champ.
Une marge négative peut rapprocher l’élément d’un voisin ou le faire empiéter sur lui. Utilisez-la avec prudence et vérifiez les différents écrans.
Si votre objectif est seulement de superposer un élément, examinez aussi les réglages de position : accumuler des marges négatives rend une mise en page difficile à comprendre.
6. Adapter et retirer une marge
Ajoutez une règle d’écran si une distance doit changer selon la largeur. Retirer une valeur retire seulement le réglage sur sa portée ; une valeur de base peut redevenir applicable.
Si une distance semble inattendue, vérifiez aussi la marge du voisin, la marge intérieure du parent et son Écart. En disposition normale, certaines marges verticales peuvent se combiner plutôt que s’additionner.