Есть ли способ остановить Outlook от нарушения заполнения <div>

Question

Я создал шаблон электронной почты с Mailchimp, который использует пользовательский блок кода.Я использую это для автоматического удаления отступов между моими заголовочными изображениями и блоком контента Mailchimp между изображениями и контентом.

Я использовал тег и некоторые стили для добавления отступов вокруг текста в блоке контента.В большинстве почтовых клиентов (Gmail, Safari) это выглядит хорошо.Только Outlook нарушает заполнение и заставляет текст прилипать к краю блока контента.

Я пытался добавить таблицу вокруг тегов, но, похоже, это не работает.

Код, который я использую, вставлен ниже:

<div class="mcnTextContent" style="background-color: #b3daf0; padding: 20px;">
<h1 style="color: #000000; text-align: left; font-size: 18pt; font-family: Tahoma, Open Sans;">Hallo!</h1>
<p style="color: #000000; text-align: left; font-size: 11pt; font-family: Tahoma, Open Sans;">Op zoek naar de beste deal? Snuffel dan even rond in onze Online Outlet! Met kortingscode FIETSOUTLET krijg je in je winkelmand namelijk nog eens <b>10% extra korting</b> op <a ><br>
</div>

Я ожидаю увидеть отступ в 20 пикселей вокруг текста, который он показывает в gmail.Но не в Outlook.

Answer 1

В Outlook очень плохая поддержка встроенных стилей.Здесь есть некоторая полезная информация (https://css -tricks.com / using-css-in-html-emails-the-story-story / ) и здесь (https://templates.mailchimp.com/development/css/outlook-conditional-css/) TL; DRиз которых: Используйте макет на основе таблицы для согласованности.

Это ужасно, я знаю.; (

<table class="mcnTextContent" cellpadding="20">
  <tr>
    <td bgcolor="#b3daf0">
      <h1 style="color: #000000; text-align: left; font-size: 18pt; font-family: Tahoma, Open Sans;">Hallo!</h1>
      <p style="color: #000000; text-align: left; font-size: 11pt; font-family: Tahoma, Open Sans;">Op zoek naar de beste deal? Snuffel dan even rond in onze Online Outlet! Met kortingscode FIETSOUTLET krijg je in je winkelmand namelijk nog eens <b>10% extra korting</b> op
        <p>
    </td>
  </tr>
</table>