时间戳

首页 > 解决方案 > HTML 电子邮件被空白包围（仅在移动设备上）

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

问题描述

当在 Outlook 或 GMail App 等移动客户端上查看时，我的 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>

标签： htmlemailoutlookgmailhtml-email

解决方案

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

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

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

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

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

推荐阅读