工作中遇到需要發郵件模板給客戶發送憑證，踩坑踩出來一下規則：
1.所有樣式必須行內，否則不起作用
大部分郵件客戶端中不支持使用外置css樣式，最好使用內聯樣式
2.所有布局必須使用table，復雜布局使用table嵌套或單元格合並
布局盡量使用table ，將頁面拆分成由上到下幾個模塊，有幾個模塊用幾個tr標簽。
3.有的郵件客戶端table默認有邊框，需要在代碼中取消
大部分郵件客戶端table默認有邊框，在行內樣式中設為0即可
4.元素樣式盡量拆開寫，margin:0;>margin-top:0;…
元素樣式拆開寫，border，margin，padding，background等等
5.元素需要取消默認樣式 padding-top:0…
像p標簽，tr，tb標簽很多都會有默認的padding和margin樣式，會影響到頁面布局
6.如果有上下間隔，盡量不使用padding和margin，使用空的table或tr元素
頁面中所有上下間隔盡量使用空的tr標簽，如果使用margin可能會造成問題
7.沒有字號標簽都添加font-size:0px;具體到標簽再設置具體字號
頁面盡量所有標簽都設置字號為0，因為有的郵件客戶端會塞入大量實體空格標簽造成頁面布局錯亂
以上是我自己編寫HTML郵件模板的在Outlook，Foxmail，163，QQ郵箱，阿里雲企業郵箱測試踩坑得出的規則。
郵件模板中最好不使用CSS3，也不是說不能使用，比如border-radius在大部分郵箱中是有效的，但是在某些郵箱（Outlook）中不起作用。為了郵件顯示不會錯亂，盡量不要使用CSS3的屬性用作布局等操作。
遇到的坑匯總(大家遇到其他坑也可以在評論區進行說明，說不定會幫到其他人)
坑1:
img標簽的寬不用寫到style里，寫到外面且不需要單位，否則在outlook下會有問題
> ``` ###### 坑2: > td標簽可以嵌入table標簽，請不要再a標簽中嵌入table標簽，否則在outlook下會有問題,鏈接點擊不會跳轉，錯誤用法 > ```
下面代碼用了兩個table標簽布局，外層的table主要用來限制頁面，內層table用來布局，按照規則2，將頁面從上到下拆成幾個模塊，在內層tr中寫頁面布局。注意： 每個tr中td的數量要保持一致否則有的郵件客戶端會補全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px; padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;font-size:0px">
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
</table>
</table>
</body>
</html>
