What is the simplest vertical spacer in Outlook (and supported everywhere else)?
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. I also need to be able to override the height with a media query to make it responsive.
<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).
I've found this consistent. I use a div with line-height:50px;. Changing line-height predictably/consistently changes the amount of spacing in MS Outlook 2016 on up and every other newer client. Contrary to @Nathan's answer, I do not see any inconsistencies by omiting font-size. I am using this in production, and we test in Litmus. I will update this answer if I find an issue. Please let me know if you find a problem.
<div style="line-height:50px;"> </div>
I would love to see more/better solutions to this question. My team and I need a goto solution to become the standard.