在 Outlook Windows 中向表格元素添加了额外的填充

Question

Here is my HTML:

<table align="center" border="0" cellpadding="0" cellspacing="0" id="wrapper"
  style="max-width: 550px; padding-top: 10px; width: 100% !important; " width="100%">
  <!--[if mso]><center><tr><td><table border="0" cellpadding="0" cellspacing="0" width="550"><![endif]-->
  <tr>
    <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt ; ">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td style=" font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 150%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px ; ">
            <table bgcolor="#90ee90" border="0" cellpadding="0" cellspacing="0" style="margin: 28px 0px; padding: 0;" width="100%">
              <tbody>
                <tr>
                  <td>
                    <!--[if mso]>
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;" width="165">
                    <tr>
                    <td style="padding-right: 20px">
                    <![endif]-->
                      <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAh1BMVEUxMjH8/v8tLixQUVEYGhjU0tT29/ghHx/P0dIhIiEnKScVFhXm6OqCf4CnqKnW1dUbHBvb3N/JyMlYVVUAAAANDwyGh4lEPz8kJSO5u734+vuwsLGdnJ3v8PFBQUEqKSlJSklfX1+enp+Uk5Vzc3N5d3cBBgC9v8CDhIRpaGloZGVFRkY6OjlfBncRAAADPklEQVR4nO3Z6XKiQBSGYWQIkUUFAw4ad03U0fu/vlGkEfXQahFTUvU+vxJz6PQnbS9oGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACeyBQ9UCrX5tckjmVZQaKrKmn3duN3cf6IpJbNqVyraT3x/iz6zWazO5x5TmmV3GxqVjmgN2+IYqHW6si1H2VvtOsMR3nVaB64YpX5V2421U2qBlyUtCwmbD6W0FvaZ3X2LHg0YVfqxyOsXlnTP5Awbl9V9qSImoRv3tMC/kDCYCiUboSBWp4wFO/5A4J1acDqCc0PqXTwSELfqziTJq3ygNUTemEh1+nHz+sZtSyhH1QMaG47b0rWBT9/QRwfKuGpLNWZCj0xt6qjq5mbuMs8r3Vduwvztvxjkb3/sTupvBaagZWJsoa/vtUrQj9OCdenspTUk0RN0pv48Gc36me/L4VxmrcUZWvXW7TfJFTNV+RlCVvygpV3JEvY05elEtXX7+yFKFsZh7oFzsmm3474DlfwhISqryMvK3YXq/7eaqG7uE4J1T1s+MvguJdxg5T22ldJ2IoKH8KSQVdYLOz+l2c5d00br5LQDwvmJRFjv1EQtj/iO0K+SsIz/ZIjgzm7KBy1x+KsW1SrhIZzvWNaGTdOCvVKaAQb+6p6qV/lapZwfzy8Pl18ae9i3RLue5z0Lk/NY91n8VUSht0C7Qp+eIxhtPrFaXWlG6evknAdBydll8RH5mGwepNefvsHE81/eJWE9+xp4sbgoDE7DkrX26rThXQSUWqVMNtof6q+ukaWUDrmK3VKGKhhuVXFUbZ2/KvBPWxF8Rmpy656BGSPj0d1a6Mi1yChPTozEJ9iTPLZsz1NLMdQJ2Jbu7q8SMJLYkKn+KjNP+1u9OtnnRIaVigW7+qw4t+X0Nxdb0v3s5TuFtYsoeGO/avSof4hds0SGqb3eV442tzo+dMSWuHA3ruVMOimZZfKv3sygvHn6cunsGfdWkiTduPQ4qD5o48SD5z31K0j+ORdpLnMdOLpejhvz4ebnXfHRiH7D1W/UvtdppskTpLcEQ8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAL/oP5BU3wQ/BxT8AAAAASUVORK5CYII=" />
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->

                    <div style="margin: 4%;">
                      <p style="margin: 1em 0;">This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
      <!--[if mso]></td></tr></table></center><![endif]-->
    </td>
  </tr>
</table>

It's supposed to look like this:

It looks fine on most email clients but when viewed in Outlook windows, it looks like this:

It looks like some extra padding is added around the image and the margin on the text also does not seem to work either. Does anyone have any idea on how to fix this?

Answer 1

Actualy I have another solution...

Change the padding on the <td> to margin on the <table> . Looks like that works.

As to why it works, I'm not too sure yet...

<!--[if mso]>
    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;margin-right: 20px" width="165">
    <tr>
    <td>
    <![endif]-->
        <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />
    <!--[if mso]>
    </td>
    </tr>
    </table>
<![endif]-->
    ```

Answer 2

This layout does not appear fixable. What Outlook is doing is an attempt to 'float' the image over the div, but it clearly does not quite work.

This article suggests another problem with this layout in that links may not be clickable when next to an image in a text block (as opposed to a separate table cell, for example): https://help.activecampaign.com/hc/en-us/articles/115001444310-Common-email-display-issues-with-Outlook --so test that aspect out too.

IMHO, best to put it in its own table cell. Divs were never well supported.

Answer 3

It looks like this is coming from the additional ghost table you have around the image.

Removing that solves the issue, but then you need to add some spacing.

For that you could use an hspace="" attribute on the image to give the margin.

<p style="margin: 1em 0;">
    <img align="left" style="width: 30%; margin-right: 4%;" hspace="20" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>

Although that will apply to both left and right.

Not a full solution but it's a start maybe.