如何在響應式電子郵件設計中使用填充和邊距？

已發表: 2024-07-26

填充和邊距是響應式電子郵件設計中至關重要的間距技術。它們乍看之下可能很相似，但無論設備或電子郵件用戶端如何，了解它們的不同角色是對電子郵件佈局充滿信心的關鍵。

在響應式電子郵件範本設計中，元素的邊距代表元素的外部空間，而填充則代表元素周圍的內部空間。邊距可防止元素相互碰撞，而內邊距則為內容提供喘息空間。內邊距和邊距相結合可以提升您的電子郵件設計，賦予其優雅且專業的外觀。

了解這些組件如何組合以分離文字和圖形非常重要。搞定它，您的電子郵件設計將看起來專業且具有視覺吸引力。錯過了目標，你可能會遭遇一場視覺災難。

如果您有興趣詳細了解什麼是填充和邊距以及如何在響應式電子郵件範本中使用它們，本指南將涵蓋您需要了解的所有內容。

CSS 盒子模型

您首先需要了解 CSS 盒模型以掌握邊距和填充。這是設計中的一個基本概念，它決定了元素如何在頁面上建構和呈現。 CSS 盒模型將每個 HTML 元素分解為由四個元件組成的分層盒：

內容：元素的核心，文字或圖像的位置。
填滿：它定義元素內容與其邊框之間的空間。填充為您的內容提供了一些喘息的空間。
邊框：填滿周圍的輪廓（如果有）。可以設計邊框樣式以增加視覺效果。
邊距：最外面的空間，將元素與其他元素或容器的邊緣分開。邊距可以讓你的元素不會感到局促。

圖片來源：電子郵件 Uplers

響應式電子郵件範本設計中的邊距是多少？

在 CSS 中，邊距是元素邊框之外的空間。它定義元素與其周圍元素或電子郵件容器邊緣之間的距離。頁邊距將電子郵件中的不同部分或元素分開，確保內容不會顯得擁擠或混亂。

為什麼頁邊距在電子郵件設計上很重要

頁邊距不僅僅是一個設計細節，它們對於保持電子郵件整潔有序的外觀至關重要。考慮到您的電子郵件可能會在多種裝置和電子郵件用戶端上查看，邊距有助於確保您的佈局無論在何處查看都保持一致且具有視覺吸引力。

它們可以防止您的內容相互衝突，使您的電子郵件不僅更易於閱讀，而且更具吸引力。

CSS 中邊距的測量單位

可以使用不同的單位來調整邊距，每種單位都有其優點：

像素 (px)：用於精確控制間距。例如，邊距：20px；為您提供所有邊 20 像素的邊距。
百分比 (%)：對於響應式設計很有用，因為邊距是相對於包含元素的寬度計算的。例如保證金：5%；設定容器寬度的 5% 的邊距。
Em：相對於元素的字體大小。非常適合適應文字大小的比例間距。例如，保證金：2em；表示邊距是字體大小的兩倍。
自動：讓瀏覽器處理邊距，通常用於水平居中元素。例如，margin: 0 auto; 將元素置於其容器的中心。

如何在 CSS 中加入邊距

您可以單獨定義邊距或使用速記邊距屬性一次設定所有邊距：

個人利潤：

margin-top：設定上邊距。

margin-right：設定右邊距。

margin-bottom：設定下邊距。

margin-left：設定左邊距。

例如：

簡寫屬性：

簡寫 margin 屬性可讓您在一個聲明中設定所有四個邊距。從頂部開始以順時針方向套用值。

例如：

電子郵件設計中邊距的挑戰

處理利潤的一個常見挑戰是利潤崩潰。當相鄰元素的邊距（例如具有底部邊距的標題後跟具有頂部邊距的段落）組合成單一較大的邊距時，就會發生這種情況。

以下是防止邊距崩潰的兩種常見解決方案：

區塊格式化上下文 (BFC)：這為元素建立了格式化上下文，防止邊距與周圍元素重疊。
Flex 和 Grid 容器：這些容器類型會自動為其內容建立格式化上下文，從而有效地阻止折疊。

響應式電子郵件範本設計中的填充是什麼？

填充是元素內容周圍的內部空間。將其視為包裝內的舒適墊子，為您的文字、圖像和其他內容提供一些急需的喘息空間。這個空間不僅涉及美觀（儘管它可以幫助您的電子郵件看起來清晰），還涉及功能和可讀性。

CSS 中填滿的測量單位

填充可以用不同的單位定義：

像素 (px)：提供精確、固定的間距。例如內邊距：15px；確保一致的 15 像素填充。
百分比 (%)：建立相對於元素寬度的填充，非常適合響應式設計。例如padding：5%；適應不同的螢幕尺寸。
Em：依照元素的字體大小設定填充，促進比例間距。例如，padding：1em；隨字體大小調整。

在 CSS 中為電子郵件添加填充

在 CSS 中，填充就像您在容器內為內容提供的額外空間。使用方法如下：

基本填充語法：若要新增填充，請使用 padding 屬性。例如：

自訂填充值：您可以使用最多四個值指定各個邊的填充：

兩個值：設定頂部/底部和左/右的填充。

三個值：設定頂部、左/右和底部的填充。

四個值：分別設定頂部、右側、底部和左側的填滿。

電子郵件設計中填充的挑戰

雖然填充是一個有價值的工具，但必須了解不同電子郵件用戶端帶來的挑戰：

支援不一致：某些電子郵件用戶端可能無法如預期呈現填充，導致電子郵件外觀變更。

Outlook 問題：Outlook，尤其是舊版，在填滿方面尤其有問題。為了獲得一致的結果，通常需要使用基於表格的佈局或內聯樣式等替代方法。

為了克服這些挑戰，請考慮結合填充、基於表格的佈局和內聯樣式來創建強大且適應性強的電子郵件設計。請務必在多個電子郵件用戶端上測試您的電子郵件，以確保最佳顯示效果。

邊距與填充

內部與外部

將邊距視為電子郵件元素外部的呼吸空間，在內容與其容器或其他元素之間建立空間。另一方面，填充從內部起作用，在內容和容器邊框之間提供空間。

背景與透明度

邊距是透明的，因此您可以看到元素後面的內容。然而，填充是元素本身背景的一部分（無論是顏色還是圖像），因此它會影響內容在其容器中的放置方式。

對尺寸的影響

頁邊距透過將元素相互推開並改變它們在電子郵件中的位置來影響整體佈局。填充會增加元素內部的空間，這可以使內容區域看起來更大，而不會更改元素的實際大小（除非您使用 box-sizing 屬性）。

負值

邊距可以設定為負值以創建重疊效果和獨特的佈局。不幸的是，padding 不支援負值；它嚴格來說是為了增加空間。

其他元素樣式

邊距不受其他元素樣式的影響，使其成為在元素周圍創建間距而不影響其外觀的簡單方法。填充可以繼承其他元素的樣式，這意味著如果您在元素上使用背景顏色或圖像，填充將影響該樣式在內容周圍的顯示方式。

影響

邊距會影響相鄰元素，可能導致它們根據所應用的邊距值移動或調整其位置。填充僅影響元素本身的內容，不會影響頁面上的其他元素。這使其成為管理內部佈局並確保內容間隔良好且具有視覺吸引力的出色工具。

何時使用邊距

需要調整元素的位置嗎？利潤是您最好的朋友！例如，如果您希望在電子郵件的中央彈出一個按鈕或將其整齊地向右對齊，邊距可以讓這一切變得輕而易舉。

想讓您的電子郵件設計脫穎而出嗎？嘗試使用邊距來創建一些時尚的重疊。想像一下，您有一張圖像想要部分覆蓋文字區塊或與橫幅重疊的號召性用語按鈕。負邊距是實現這些引人注目的效果、增添魅力並吸引人們對關鍵內容的注意力的最佳選擇。

邊距可協助您在元素之間保持適當的空間量。假設您有一系列產品圖片和描述。透過在它們之間應用一致的邊距，您可以避免混亂的外觀，並使您的電子郵件更易於閱讀。

何時使用填充

填充是讓您的電子郵件按鈕更具吸引力或為圖像提供更多喘息空間的首選。假設您希望號召性用語按鈕更加突出並且更易於點擊。在其周圍添加填充會使其變大，而不會影響其外部尺寸。同樣，圖像周圍的額外填充可確保它們不會感到局促並保持乾淨的外觀。

填充非常適合在內容和元素邊緣之間創建舒適的距離。想像一個周圍有邊框的文字區塊 - 填充會增加空間，這樣您的文字就不會感覺被邊框擠壓。

在段落或產品描述周圍添加填充可確保文字間距良好且易於閱讀，從而改善整體使用者體驗和可讀性。

包起來

現在你就擁有了！了解填充和邊距的作用對於在響應式電子郵件範本設計中建立簡潔有效的佈局至關重要。

有效使用填充和邊距可以增強跨不同平台的電子郵件美觀和效能。透過適當放置的邊距和填充，您的設計將更加乾淨、更具吸引力，並且更容易讓觀眾瀏覽。

因此，下次您製作電子郵件範本時，請記住有策略地使用邊距和填充，以創建在任何收件匣中脫穎而出的精美、專業的外觀。