HTML電子郵件中的垂直邊緣大屠殺

Question

我知道HTML電子郵件渲染是一種流淚，但這太奇怪了。

我試圖讓我的元素之間保持一致的垂直間距。我使用<hr>元素作爲分隔符，並且我正在嘗試將頂部/底部邊距應用於它們。但是，即使我在線應用這些邊距，當我在Gmail客戶端中檢查它時，css正在被損壞。

例如，

被當成：

<hr style='margin:20px 0 2px 0;' /> 

收到爲：

<hr style='margin:2 0px 0 2px 0;' /> 

什麼?? ...

被當成：

<hr style="margin-top:20px; margin-bottom:2px;" /> 

收到爲：

<hr style="margin-bottom:2px;" /> 

來吧...

我認爲，在聯樣式將是安全的，而且即使如果渲染失敗，至少實際的CSS不會被破壞。我在這裏處理什麼？

（我用標準的PHP郵件發送這些出（）函數了WordPress網站）

Answer 1

不同的客戶端處理不同margin屬性。有些人完全忽略它。獲得均勻垂直空間的最常見方法是對整個電子郵件使用表格佈局，並使用空行的表格單元格併爲其設置高度以創建空格。將你的人力資源放置在表格中，而不會爲他們增加利潤。

另一種方法是插入你的hr作爲圖像併爲它們設置高度。

我會用第一種方法，因爲這是在大多數受歡迎的客戶端中嘗試和測試。如果您不習慣使用表格來設置佈局，那麼值得嘗試。

在html電子郵件中使用速記屬性從來不是一個好主意，因爲有些客戶端不支持速記屬性。