What is the simplest vertical spacer in Outlook?
I have two elements, one on top of the other, both with display:block. I would like to space them without wrapping either in a table. I want a spacer that I can reuse anywhere with only simple adjustments to its height. I need to be able to set it to specific pixel heights.
<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>
Part of the goal is to avoid splitting things up into table cells every time we need vertical gaps, since that tends to add other complexities even aside from code bloat (bad for email).
CodePudding user response：
For a application specific spacer you could use:
<p> </p>
Outlook is quite respectful of common css styling so you could simply use height attribute on any element or class I use the pre tag in this example:
<!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>
I would avoid using margin and padding as its very sporadic across different email clients.
But the most compatible way I've found to maintain spacing across all email clients is sadly still with tables.
CodePudding user response：
I don't know (yet) if this is the simplest, but I've found it mostly consistent in Outlook 2016 and up. I use a div with font-size:0px;line-height:0px;, and either top or bottom padding.
[EDIT] I've realized in testing, div height fails in Outlook 2016 when a border is NOT applied...
<div style="font-size:0px;line-height:0px;padding-top:10px;">
<!-- vertical spacer/shim -->
</div>
I would love to see more/better solutions to this question. My team and I need a goto solution to become the standard.