調整垂直對齊與邊框間距 alignment-and-padding

在此頁面上:​瞭解如何調整Email Designer中欄和結構的垂直對齊和填補,包括如何修正剩餘片段填補,以實現正確的行動呈現。

在此範例中,我們將調整由三欄組成的結構元件內的邊框間距和垂直對齊方式。

  1. 直接在電子郵件中選取結構元件,或使用左側功能表中可用的​導覽樹狀結構

  2. 在工具列中按一下​選取資料行,然後選擇您要編輯的資料行。 您也可以從結構樹中選取它。

    該欄的可編輯引數會顯示在​ 樣式 ​索引標籤中。

  3. 在​ 對齊方式 ​下,選取​​或​

  4. 在​ 內距 ​下,定義所有邊的內距。

    若要微調內距,請選取​每一邊不同的內距。 按一下鎖定圖示以中斷同步。

  5. 以類似的方式調整其他欄的對齊方式和邊框間距。

  6. 儲存您的變更。

TIP
在Android裝置上為Gmail設計電子郵件內容時,請確定影像和分隔符號使用欄邊距,而非大型的固定邊界。 Android上的Gmail經常會不正確地呈現過大的影像和邊界,造成版面溢位或分隔線減少。 使用較小的影像寬度或仰賴欄式邊框間距來維持顯示的一致性。

使用階層連結導覽管理片段邊距 fragment-padding-breadcrumb

在電子郵件Designer中使用片段時,您可能會遇到隱藏的或殘留的內距,這些內距對行動轉譯的影響與案頭不同。 當片段已解除鎖定或繼承已中斷時,這會特別常見,因為剩餘的樣式可以保留在基礎欄或文字元件中。

若要識別及編輯片段中的剩餘邊框間距:

  1. 使用​導覽樹狀結構,或直接按一下編輯器中的元素,以選取片段中的每個父結構或欄。 這有助於您找出行動裝置特有的隱藏邊框間距或邊界。

  2. 在階層連結中選取元素後,導覽至右側的​ 樣式 ​索引標籤。

  3. 檢閱​ 內距 ​設定,並視需要移除或重新調整內距,以取得正確的行動對齊方式。

  4. 如果重複使用片段時對齊問題持續存在,請對片段中的其他欄或文字元件重複此程式。

NOTE
當重複插入和移除片段時,此行為是預期行為,因為樣式規則可以累積。 請一律使用階層連結導覽來驗證邊框間距值,尤其是在鎖定行動裝置為目標時。
AI Knowledge Reference

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.
recommendation-more-help
journey-optimizer-help