Sur cette page : découvrez comment ajuster l’alignement vertical et la marge intérieure des colonnes et des structures dans le Designer d’e-mail, y compris comment corriger la marge intérieure des fragments résiduels pour un rendu mobile correct.
Dans cet exemple, nous allons ajuster la marge intérieure et l’alignement vertical à l’intérieur d’un composant de structure composé de trois colonnes.
-
Sélectionnez le composant de structure directement dans l’email ou à l’aide de l’arborescence de navigation disponible dans le menu de gauche.
-
Dans la barre d’outils, cliquez sur Sélectionner une colonne et choisissez celle à modifier. Vous pouvez également la sélectionner dans l’arborescence.
Les paramètres modifiables de cette colonne sont affichés dans l’onglet Styles.
-
Sous Alignement, sélectionnez Haut, Milieu ou Bas.
-
Sous Marge intérieure, définissez la marge intérieure pour tous les côtés.
Sélectionner Marge intérieure différente pour chaque côté si vous souhaitez mieux définir la marge intérieure. Cliquez sur l’icône représentant un verrou pour interrompre la synchronisation.
-
Procédez de la même façon pour ajuster l’alignement et la marge intérieure des autres colonnes.
-
Enregistrez vos modifications.
Gérer la marge intérieure des fragments avec la navigation par chemin de navigation fragment-padding-breadcrumb
Lorsque vous utilisez des fragments dans le Concepteur d’e-mail, des marges intérieures masquées ou résiduelles peuvent altérer le rendu sur les appareils mobiles par rapport à l’affichage sur les ordinateurs. Cela est particulièrement fréquent lorsque des fragments ont été déverrouillés ou lorsque l’héritage a été rompu, car les styles restants peuvent rester dans la colonne ou les composants de texte sous-jacents.
Pour identifier et modifier la marge intérieure résiduelle dans les fragments :
-
Utilisez l’arborescence de navigation ou cliquez directement sur les éléments dans l’éditeur pour sélectionner chaque structure parent ou colonne de votre fragment. Vous pouvez ainsi repérer les marges intérieures ou extérieures masquées qui peuvent être spécifiques aux appareils mobiles.
-
Après avoir sélectionné l’élément dans le chemin de navigation, accédez à l’onglet Styles à droite.
-
Passez en revue les paramètres de marge intérieure et supprimez-la ou réajustez-la selon les besoins pour obtenir un ajustement parfait sur les appareils mobiles.
-
Si des problèmes d’ajustement persistent lors de la réutilisation de fragments, répétez ce processus pour d’autres colonnes ou composants de texte dans le fragment.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to adjust the vertical alignment and padding of columns in a structure component in the Email Designer, and how to locate and fix residual fragment padding for correct mobile rendering using breadcrumb navigation.
Intents:
- Adjust vertical alignment (Top, Middle, Bottom) of a column in a structure component
- Set padding for all sides, or different padding per side, of a column
- Fine-tune padding by breaking synchronization with the lock icon
- Identify and remove hidden or residual fragment padding affecting mobile rendering
Glossary:
- Alignment: A Styles-tab setting for a column, with options Top, Middle, or Bottom (product-specific)
- Padding: A Styles-tab setting defining padding for all sides of a column, with an option for Different padding for each side (product-specific)
- Navigation tree: The left-hand menu used to select a structure component or column (product-specific)
- Breadcrumb navigation: Used to select each parent structure or column within a fragment to locate hidden padding or margin specific to mobile devices (product-specific)
Guardrails:
- Residual or hidden fragment padding is particularly common when fragments have been unlocked or when inheritance has been broken, as leftover styling can remain in the underlying column or text components.
- Accumulated styling from repeatedly inserting and removing fragments is expected behavior; verify padding values using breadcrumb navigation, especially when targeting mobile devices.
- For Gmail on Android, use column padding rather than large fixed margins, and use a smaller image width, because Gmail on Android often renders oversized images and margins incorrectly.
Terminology:
- Canonical name: Vertical alignment and padding — Acronym: n/a — variants: alignment and padding, column padding
- Synonyms: “Different padding for each side” = “fine tune the padding”
- Do not confuse: “Alignment” (Top/Middle/Bottom vertical positioning) ≠ “Padding” (space on the sides of a column)
FAQ:
- Q: What vertical alignment options are available for a column? — Top, Middle, or Bottom.
- Q: How do I set different padding on each side of a column? — Select Different padding for each side and click the lock icon to break synchronization.
- Q: Why does my fragment have extra padding on mobile but not desktop? — Leftover styling can remain when fragments are unlocked or inheritance is broken; use the Navigation tree or breadcrumb to select parent structures/columns and remove or readjust the padding.
- Q: How should I handle images and dividers for Gmail on Android? — Use column padding rather than large fixed margins and a smaller image width, since Gmail on Android often renders oversized images and margins incorrectly.