HTML 电子邮件被空白包围（仅在移动设备上）答案

【问题标题】：HTML E-Mail gets surrounded by white space (just on mobile)HTML 电子邮件被空白包围（仅在移动设备上）
【发布时间】：2021-05-03 15:12:22
【问题描述】：

当在 Outlook 或 GMail 应用程序等移动客户端上查看时，我的 HTML 邮件在实际邮件周围会收到一个空白。

如您所见，每边都有一些空白。

https://i.stack.imgur.com/9bt8y.png

在麦当劳的时事通讯中，例如这个空白不存在。

https://i.stack.imgur.com/rVrDh.jpg

我想知道，我怎样才能做到这一点，空白消失。

编辑

    <head>
    <style>
        body {
            margin:0;
        }

        #body {
            color: #848484;
            font-size: 18px;
            line-height: 30px;
        }

        #body {
            color:#dd9f33;
            font-size: 18px;
            line-height: 30px;
        }

        @media screen and (max-width: 760px) {
            #body {
                margin: 0;
                font-size: 25px;
                line-height: 40px;
            }
        }
    </style>
</head>

<table role="presentation" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ededed">
    <tr>
        <td align="center" valign="top">
            <table style="padding: 23px" cellpadding="0" cellspacing="0" width="100%">

                <tr>
                    <td align="center" valign="top">
                        <table style="border-radius: 50px 50px 0 0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"
                               width="600">
                            <tr>
                                <td id="body" align="left" valign="top" style="">
                                    <div style="text-align: center;"><img width="600" src="some_image"></div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td align="center" valign="top">
                        <table border="0" style="border-radius: 0 0 25px 25px" cellpadding="15" cellspacing="15"
                               bgcolor="#FFFFFF" width="600">
                            <tr>
                                <td id="body" align="left" valign="top">

                                    Here I have the plain Mail content, simple
                                    div tags

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td align="center" valign="top">
                        <table cellpadding="15" cellspacing="15" width="100%" bgcolor="#ededed">
                            <tr>
                                <td align="center" valign="top">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【问题讨论】：

您可以发布您的电子邮件代码吗？很难提供帮助。
您好，感谢您的回复。我刚刚包含了当前代码

标签： html email outlook gmail html-email

【解决方案1】：

您需要将border-collapse: collapse 添加到您的表格中，即

<style type="text/css">
   table {
     border-collapse: collapse;
   }
</style>

虽然您确实应该为那些不接受<style> 代码的电子邮件客户端内联它，即：

<table style="border-collapse: collapse;">

如果它位于您的 <style> 部分中，您可以使用自动化工具来内联您的代码，例如 https://inliner.cm/

【讨论】：