HTML 电子邮件：如何删除 2 个表格之间的间距？特别是 Gmail

Question

是我还是 gmail bulls**t？在 outlook/browsers 上，我的电子邮件是完美的，但在 gmail 上，2 个表格之间有一个 space，为什么？！？图片：http://i.imgur.com/srJKBJZ.png

请不要告诉我 cellspacing、padding 或 border space 它们都已经在代码中了。如果你能帮助我，我将不胜感激。提前致谢！！

代码：

<body style="margin:0; padding:0">
    <table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
        <tr>
          <td VALIGN="bottom"> 
            <img src="http://i.imgur.com/vyJu43v.png">
          </td>
          <td VALIGN="bottom">
            <a href="https://twitter.com/opinionmatters_"><img src="http://i.imgur.com/vSAgEXE.png"></a>
          </td>
          <td VALIGN="bottom">
           <a href="https://www.linkedin.com/company/opinion-matters"> <img src="http://i.imgur.com/Ih5jtiC.png"></a>
          </td>
        </tr>
    </table>
    <table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
        <tr>
          <td rowspan="4" VALIGN = "top">
            <img src="http://i.imgur.com/9B9Wcit.png">
          </td>
          <td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>

<p style="font-family:arial; color:#002d62">Read online <a href="http://www.opinionmatters.com/insightnewsletter.html" style="">here</a> or <a href="http://www.opinionmatters.com/index.php/contact-us">request a printed copy</a></p>
          </td>
          <td rowspan="4" VALIGN = "top">
            <img src="http://i.imgur.com/lNwkYpL.png">
          </td>
        </tr>
        <tr>
          <td>
            <img src="http://i.imgur.com/79k0VgK.png">
          </td>
        </tr>
        <tr height="70">
          <td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email <a href="mailto:newsletter@opinionmatters.com" style="text-decoration:none; color:#002d62">newsletter@opinionmatters.com</a></p>
          </td>
        </tr>
        <tr>
          <td VALIGN = "bottom">

            <img src="http://i.imgur.com/brGmdjG.png">
          </td>
        </tr>

    </table>
    <p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe <a href="" style="text-decoration:none;color:#85808e">here.</a><br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>
  </body>

Answer 1

现在习惯于 img 使用 valign="top"

标记

<img src="xyz.png" valign="top" />

像这样

<table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0;">
        <tr>
          <td VALIGN="bottom"> 
            <img src="http://i.imgur.com/vyJu43v.png" valign="top">
          </td>
          <td VALIGN="bottom">
            <a href="https://twitter.com/opinionmatters_"><img src="http://i.imgur.com/vSAgEXE.png" valign="top"></a>
          </td>
          <td VALIGN="bottom">
           <a href="https://www.linkedin.com/company/opinion-matters"> <img src="http://i.imgur.com/Ih5jtiC.png" valign="top"></a>
          </td>
        </tr>
    </table>
    <table cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; border-spacing: 0">
        <tr>
          <td rowspan="4" VALIGN = "top">
            <img src="http://i.imgur.com/9B9Wcit.png">
          </td>
          <td>
<p style="font-family:arial; color:#002d62;">The new Insight Snapshot newsletter from Opinion Matters is packed full of research<br/>and communication ideas to inform your next project. Featuring tips for data<br/>storytelling, ways to interact with your target audience through online quizzes and<br/>case study examples of recent international survey campaigns.</p>

<p style="font-family:arial; color:#002d62">Read online <a href="http://www.opinionmatters.com/insightnewsletter.html" style="">here</a> or <a href="http://www.opinionmatters.com/index.php/contact-us">request a printed copy</a></p>
          </td>
          <td rowspan="4" VALIGN = "top">
            <img src="http://i.imgur.com/lNwkYpL.png">
          </td>
        </tr>
        <tr>
          <td>
            <img src="http://i.imgur.com/79k0VgK.png">
          </td>
        </tr>
        <tr height="70">
          <td height="70">
<p style="font-family:arial; color:#002d62;">If you would like to speak to a member of the team regarding any of the features in<br/>the newsletter please call 0207 251 9960 or email <a href="mailto:newsletter@opinionmatters.com" style="text-decoration:none; color:#002d62">newsletter@opinionmatters.com</a></p>
          </td>
        </tr>
        <tr>
          <td VALIGN = "bottom">

            <img src="http://i.imgur.com/brGmdjG.png">
          </td>
        </tr>

    </table>
    <p style="color:#85808e; font-size:14px; text-align:center">Data Protection: We will not pass your details on to any third party or send you unsolicited mail. If you would like<br/>
to unsubscribe from this and any future mailings please unsubscribe <a href="" style="text-decoration:none;color:#85808e">here.</a><br/><br/>markettiers4dc trading as Opinion Matters. Registered office: Northburgh House, 10a Northburgh Street,<br/>London, EC1V 0AT. Registered in England & Wales No. 4308785 VAT number 783 037 913. CIPR Partner, ISO<br/>9001:2000 registered (Certificate Number GB7041)</p>

What is Vertical Align

Answer 2

您是否尝试过将 margin-top:-5px 用于第二个 table ，我认为这应该删除 space .

HTML 电子邮件：如何删除 2 个表格之间的间距？特别是 Gmail

HTML Email : How do I remove spacing between 2 tables? Gmail specificially

html

css

email

gmail

html-email