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

问题描述 投票：0回答：2

在 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
2个回答
0
投票

您需要将 

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

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

尽管您确实应该为那些不接受 

<style>
代码的电子邮件客户端内联它，即：

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

如果您的 

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

0
投票

边界崩溃并没有改变这一点。为了防止移动设备中 HTML 电子邮件两侧出现空格，您需要在标记中包含 body 元素并重置 padding 和 margin 属性。

<body style="margin: 0; padding: 0;">
    <!-- your HTML e-mail code here -->
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.