mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.08k stars 960 forks source link

outlook adds weird top/bottom padding on sections #2444

Closed npracht closed 2 years ago

npracht commented 2 years ago

Describe the bug I'm having an issue with recent version of Outlook 365 adding padding top/bottom on section without background color which shows the body background color.

To Reproduce Steps to reproduce the behavior:

  1. Create a file with the MJML code above
  2. Render it to HTML
  3. Send the HTML to an email address using outlook 365
  4. See error
<mjml owa="desktop">
 <mj-head>
       <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Lato:400,700,900" />
  </mj-head>
  <mj-body background-color="#e5ecf4">
    <mj-section css-class="slot-section" padding-top="0px" padding-bottom="10px">
      <mj-column css-class="slots">
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="center" font-size="12px" line-height="16px" padding-bottom="0px" color="#2b485c">Si vous ne visualisez pas ce mail, <a href="{webview_url}" style="text-decoration:none;color:#057dbc;" target="_blank">cliquez ici</a></mj-text>
      </mj-column>
    </mj-section>

    <mj-section css-class="slot-section" padding-top="0px" padding-bottom="0px" background-color="#FFFFFF">
      <mj-column css-class="slots">
        <mj-image css-class="slot-image" src="https://go.engie-vertuoz.fr/media/images/logo_vertuoz_185px.png" href="https://engie-vertuoz.fr/" width="185px" alt="Vertuoz"></mj-image>
      </mj-column>
    </mj-section>

    <mj-section css-class="slot-section" padding-top="0px" padding-left="0px" padding-right="0px" padding-bottom="0px" background-color="#FFFFFF">
      <mj-column css-class="slots">
        <mj-image css-class="slot-image" src="https://go.engie-vertuoz.fr/media/images/head-cover-mailing.png" width="600px" padding="0px" fluid-on-mobile="true" alt="Smart Human"></mj-image>
      </mj-column>
    </mj-section>

    <mj-section css-class="slot-section" padding="40px 16px 10px 16px" background-color="#FFFFFF">
      <mj-column css-class="slots" padding="0px 5px">
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="16px" line-height="20px" padding-bottom="0px" font-weight="900" color="#057dbc" padding="10px 0px">
          In ut quam vitae odio lacinia tincidunt. Phasellus consectetuer vestibulum elit. Aenean ut eros et nisl sagittis vestibulum. Sed fringilla mauris sit amet nibh.
        </mj-text>
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="16px" line-height="20px" padding-bottom="0px" font-weight="900" color="#6ed2b1" padding="0px 0px 10px 0px">
          Etiam ultricies nisi vel augue cursus velit. Phasellus magna.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section css-class="slot-section" padding="10px 16px" background-color="#FFFFFF">
      <mj-column css-class="slots" padding="0px 5px" width="35%" vertical-align="middle">
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="84px" line-height="88px" padding-bottom="0px" font-weight="900" color="#fac000" padding="10px 0px">
          15%
        </mj-text>
      </mj-column>
      <mj-column css-class="slots" padding="0px 5px" width="65%" vertical-align="middle">
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="16px" line-height="20px" padding-bottom="0px" color="#212121" padding="10px 0px">d'économies d'énergie sont réalisées grâce à l'individualisation des frais de chauffage.
        </mj-text>
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="11px" line-height="15px" padding-bottom="0px" color="#212121" padding="5px 0px">Moyenne constatée sur une base de plus de 4000 logements, Source ADEME, 2018.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section css-class="slot-section" padding="10px 16px" background-color="#FFFFFF">
      <mj-column css-class="slots" padding="0px 5px">
        <mj-text css-class="slot-text" font-family="Lato, Arial, Sans serif" align="left" font-size="14px" line-height="18px" padding-bottom="0px" color="#212121" padding="10px 0px">
          Praesent blandit laoreet nibh. Nullam tincidunt adipiscing enim. Curabitur turpis. Donec vitae sapien ut libero venenatis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent blandit laoreet nibh.
          <br /><br />Nullam tincidunt adipiscing enim ! Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Quisque id mi. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Vivamus elementum semper nisi.
          <br /><br />📱 Nam at tortor in tellus interdum sagittis. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Morbi vestibulum volutpat enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
          <br /><br />🎯 Maecenas tempus tellus :
          <ul><li>Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl</li>
           <li>Id fringilla neque ante vel mi</li>
          <li>Pellentesque dapibus hendrerit tortor.</li>
          <li>Vivamus quis mi. Duis leo. Vivamus quis mi.</li></ul>
        </mj-text>
        <mj-button css-class="slot-button" font-family="Lato, Arial, Sans serif" align="center" font-size="16px" line-height="16px" href="https://engie-vertuoz.fr/" inner-padding="20px 20px" background-color="#057dbc" color="#FFFFFF" padding="10px 0px 0px 0px" border-radius="0px">Je souhaite être recontacté(e)</mj-button>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

Screenshots image

npracht commented 2 years ago

What i see when people transfer email to me:

Capture d’écran 2022-03-15 à 10 34 07
iRyusa commented 2 years ago

This is because you send it via Outlook. Try with putsmail.com and it will be fine