Outlook 中最簡單的垂直間隔是什么（其他地方都支持）？
我有兩個元素，一個在另一個之上，都帶有display:block. 我想把它們分開而不用放在桌子上。我想要一個可以在任何地方重復使用的墊片，只需簡單地調整它的高度。我需要能夠將其設定為特定的像素高度。我還需要能夠使用媒體查詢覆寫高度以使其回應。
<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>
部分目標是避免每次我們需要垂直間隙時將內容拆分為表格單元格，因為這往往會增加其他復雜性，即使除了代碼膨脹（對電子郵件不利）。
uj5u.com熱心網友回復：
如果它靠近表格邊緣，最簡單的方法是向<td>元素添加填充：
<td style="padding:20px 0;">
但是在表格單元格中，最簡單的方法是使用<p>帶邊距的元素：
<p style="margin:20px 0;">
請記住始終指定段落的頂部和底部邊距，因為有默認值。我假設您已經使用了 a<p>所以它在此之后得到了內容。（所以，不要<p> </p>像另一篇帖子所說的那樣使用 - 電子郵件客戶端的高度會有所不同。一些電子郵件客戶端會洗掉所有<style>塊，例如 Gmail IMAP。）
如果您不使用塊級元素并且想要獨立的東西（這很奇怪），您可以使用 a<div>并指定 line-height 和 font-size：
<div style="font-size:30px;line-height:30px;"> </div>
為了比較，如果我們要使用 a <p>，我們必須寫這樣的東西，因為<p>' 有一個你必須重置的默認邊距，所以單詞比 a 略多<div>：
<p style="font-size:30px;line-height:30px;margin:0"> </p>
（或者margin:30px 0 0 0;font-size:0;line-height: 0;可以說是“更簡單”）
uj5u.com熱心網友回復：
對于特定應用的墊片，您可以使用：
<p> </p>
Outlook 非常尊重常見的 css 樣式，因此您可以簡單地height在任何元素或類上使用屬性，我pre在此示例中使用標簽：
<!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" />
<style>
pre {
height:40px;
}
</style>
</head>
<body>
<h1><%Header%></h1>
<%Body%>
<div>Line 1</div>
<pre> </pre>
<div>Line 2</div>
</body>
</html>
我會避免使用邊距和填充，因為它在不同的電子郵件客戶端中非常零星。
但遺憾的是，我發現在所有電子郵件客戶端之間保持間距的最兼容方式仍然是表格。
uj5u.com熱心網友回復：
我還不知道這是否是最簡單的，但我發現它基本一致。我用一個divwith line-height:50px;。可預測/一致地更改line-height會更改 MS Outlook 2016 在 up 和所有其他客戶端上的間距量。
<div style="line-height:50px;"> </div>
我很想看到這個問題的更多/更好的解決方案。我和我的團隊需要一個 goto 解決方案才能成為標準。
uj5u.com熱心網友回復：
在電子郵件開發中，您總是希望使用表格來實作跨客戶端的一致性。重置所有基本樣式并使用高度/寬度作為間距。
<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody style="margin: 0;padding: 0;">
<tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
<td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
</tr>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436916.html
上一篇：寬度的HTML電子郵件黑客