このページでは、電子メール Designerの列と構造の垂直方向の整列とパディングを調整する方法について説明します。この中には、モバイルでの正しいレンダリングのために残差フラグメントのパディングを修正する方法も含まれます。
この例では、3 つの列で構成される構造コンポーネント内のパディングと垂直方向の整列を調整します。
-
メール内で構造コンポーネントを直接選択するか、左側のメニューで使用可能な ナビゲーションツリー を使用します。
-
ツールバーから、「列を選択」をクリックし、編集する列を選択します。 構造ツリーから選択することもできます。
その列の編集可能なパラメーターが、「スタイル」タブに表示されます。
-
整列で、「上」、「中央」、または「下」を選択します。
-
「パディング」で、すべての辺のパディングを定義します。
パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。 鍵アイコンをクリックして、同期を解除します。
-
同じようにして、他の列の位置揃えとパディングを調整します。
-
変更を保存します。
パンくずナビゲーションを使用したフラグメントのパディングの管理 fragment-padding-breadcrumb
E メールデザイナーでフラグメントを操作する際に、デスクトップとは異なるモバイルレンダリングに影響を与える非表示のパディングや残余のパディングが発生する場合があります。 これは、フラグメントがロック解除されている場合や継承が破損している場合に特によく発生し、残りのスタイルが基になる列やテキストコンポーネントに残ることがあります。
フラグメントの残りのパディングを特定して編集するには：
-
ナビゲーションツリーを使用するか、エディターで要素を直接クリックして、フラグメント内の各親構造または列を選択します。 これにより、モバイルデバイスに固有の非表示のパディングやマージンを見つけることができます。
-
パンくずリストの要素を選択したら、右側の「スタイル」タブに移動します。
-
パディング設定を確認し、必要に応じてパディングを削除または再調整して、モバイル上の表示を正しく調整します。
-
フラグメントを再利用しても整列の問題が解決しない場合は、フラグメント内の他の列またはテキストコンポーネントに対してこのプロセスを繰り返します。
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.