Я использовал Mailchimp для построения основной структуры шаблона, а затем изменил свойства и добавил некоторые элементы, чтобы он работал в версиях Outlook.
Отлично выглядит на большинстве веб-клиентов, настольных клиентов (Thunderbird и Mail [Apple]), но в Outlook появляется белый пробел.
Я проверял код несколько раз, делал модификации, и единственное, что я получаю, это двигаться вниз или вверх по белому разрыву. Я изменил шаблон и поместил некоторый стандартный контент, чтобы вы могли проверить исходный код.
Вот кодовая ручка для проверки исходного кода: https://codepen.io/anon/pen/wEoxKy
<div class="col num6" style="max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;background-color:#000000;">
<div style="background-color: #000000; width: 100% !important;"><!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 5px;"><!--<![endif]-->
<div align="center" class="img-container center autowidth fullwidth " style="padding-right: 0px; padding-left: 0px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0.5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth fullwidth" height="auto" src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1ce36b9c8-funny-weird-wtf-stock-photos-coverimage.jpg" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 261px; max-width: 245px; display: block !important;" title="Image" width="262.5" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-top: 5px; height: 40px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px; padding-top: 5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth " height="auto" src="https://via.placeholder.com/170x40" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 192px; max-width: 168px; display: block !important;" title="Image" width="192" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="80" style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;background-color:#000000;"><![endif]-->
<div class="bwmxstext" style="color:#998b70;line-height:150%;font-family:'Roboto', sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">
<div style="font-size:12px;line-height:18px;color:#fff;font-family:'Roboto', sans-serif;text-align:left;height: 80px;">
<p style="margin: 0;font-size: 12px;line-height: 18px;text-align: center"><span style="font-size: 13px; line-height: 25px;"><strong><span style="line-height: 25px; font-size: 13px;">LOREM IPSUM</span></strong></span></p>
<p style="margin: 0;font-size: 11px;line-height: 16px;text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum dictum sollicitudin. Donec mattis mauris et massa dapibus, at posuere neque mollis.</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-bottom: 10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;background-color:#000000;"><td width="25%" align="right"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-left.png"></td><td style="padding-right: 0px; padding-left: 0px; background-color: #fff; vertical-align: middle;" width="50%" valign="middle" align="center"><![endif]--><a href="#" style="background-color: #fff; padding: 3px 0px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 13px; color: #000; text-decoration: none; font-weight: bold; font-family: 'Open Sans', sans-serif;"> BOOK NOW </a> <!--[if mso]></td><td width="25%" align="left"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-right.png"></td></tr></table><![endif]--></div>
<!--[if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
Вот как это выглядит в Outlook 2010. Я не могу найти ни одного элемента, вызывающего этот белый разрыв. Также пытался установить основной контейнер на черный, так что, возможно, я мог бы скрыть его, но он вообще не получает цвет.