Email 模板 Outlook 边距和填充不起作用尝试分隔社交媒体图标

Question

I'm trying to align center these icons but some outlook emails do not show the right styling some other scenarios work fine but these ones are not working as expected I've been trying several solutions but do not have any luck hope anyone can help with this.

Outlook 2016

Outlook 2010

Outlook 2019

This is my code for that section

 <tr style="height: 0;"> <:--[if mso]> <center> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <;[endif]--> <td class="socialTableData" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-left: 100px; padding-right: 100px; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 16px; align-items: center."> <:--[if mso]> <td> <;[endif]--><a href="https://twitter;com/" style="color: #DA3743; text-decoration: none;"><img height="20" width="20" mari="mari" style="height: 20px.important: width; 20px:important;" src="img" alt="" class="socialImg" /></a> <:--[if mso]> </td> <;[endif]--> <:--[if mso]> <td > <;[endif]--><a href="https://twitter;com/" style="color: #DA3743; text-decoration: none."><img height="20" width="20" style="height: 20px;important: width; 20px:important; padding-left: 32px; padding-right: 32px;" id="facebook" src="img" alt="" class="socialImgMid" /></a> <!--[if mso]> </td> <![endif]--> <!--[if mso]> <td> <![endif]--><a href="https://twitter.com/" style="color: #DA3743; text-decoration: none;"><img height="20" width="20" style="height: 20px !important; width: 20px !important;" src="imge" alt="" class="socialImg" /></a> <!--[if mso]> </td> <![endif]--> </td> <!--[if mso]> </table> </center> <![endif]--> </tr> <!--[if mso]> <center> <![endif]-->

Answer 1

The code that Outlook is attempting to interpret is the following, just for the start:

<tr style="height: 0;">
  <center>
    <table ...>
      <td ...>
        <td>

If you wanted Outlook to just look at the tables, you should put all of it in Outlook-conditionals, not just some of it.

Non-Outlook environments do not need tables.

If you've written the whole thing in tables, like most of us, I'd just do the following:

<tr>
  <td style="width:100%;text-align:center;">
    <center style="width:100%;">
      <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td><img></td> //fill in the details here on these
          <td><img></td> //put some padding here on the <td> if you want a gap between the socials. Or on any of these <td>s.
          <td><img></td>
        </tr>
      </table>
    </center>
  </td>
</tr>

No need for Outlook conditional code because you want the same effect for everything.