为什么HTML邮件模板在Gmail中出现额外空白，Outlook显示正常？

这个问题是Gmail对HTML邮件的标签、样式解析规则和Outlook不同导致的，具体修复方案如下：

核心问题原因 #

• Gmail会默认拦截外部字体链接，你引入的Poppins字体无法加载， fallback 字体行高变化会撑出多余空白
• 缺少邮件客户端通用的样式reset规则，Gmail会默认给body、table添加默认边距
• <table> 使用了align="left"属性，Gmail会将其识别为浮动元素，自动添加周围空白
• 换行标签写法错误（</br>）、图片未设置display:block都会产生多余的隐性空白
• 表格固定高度设置和实际内容高度不匹配，产生额外空白

具体修复步骤 #

1. 在<head>的<style>标签中添加邮件客户端兼容reset样式，覆盖Gmail默认边距
2. 移除<table>的align="left"属性，单栏邮件不需要额外左对齐设置，避免触发浮动空白
3. 所有font-family配置添加通用字体 fallback，避免外部字体加载失败导致布局偏移
4. 修正错误的</br>为标准<br/>
5. 给所有<img>标签添加display:block样式，清除图片默认底部空白
6. 移除<table>的固定高度设置，让内容自动撑开高度

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="x-apple-disable-message-reformatting">
        <title>Reset password email</title>
        <!--[if mso]>
            <noscript>
                <xml>
                    <o:OfficeDocumentSettings>
                        <o:PixelsPerInch>96</o:PixelsPerInch>
                    </o:OfficeDocumentSettings>
                </xml>
            </noscript>
        <![endif]-->
        <style>
            /* 新增兼容reset样式 */
            * {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
            }
            body {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                -webkit-text-size-adjust: 100%;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
                mso-table-lspace: 0pt;
                mso-table-rspace: 0pt;
                font-family: 'Poppins', Arial, sans-serif;
            }
        </style>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
            rel="stylesheet"
        />
    </head>
    <body
        style="
            background: #ffffff;
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            font-family: 'Poppins', Arial, sans-serif;
        "
    >
        <table
            cellpadding="0"
            cellspacing="0"
            style="
                border: 0;
                background: #ffffff;
                width: 412px !important;
            "
        >
            <tbody>
                <tr>
                    <td
                        style="
                            padding: 64px 0 0 53px;
                            font-weight: 500;
                            font-size: 12px !important;
                            line-height: 18px;
                            height: 18px;
                            width: 123px;
                        "
                    >
                        Zapomniałeś hasła ?
                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            padding: 14px 0 0 53px;
                            font-weight: 400;
                            font-size: 12px !important;
                            line-height: 18px;
                            height: 18px;
                            width: 313px;
                        "
                    >
                        Aby zresetować hasło, proszę kliknąć w poniższy link:
                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            border-radius: 3px;    
                            background-color: #ffffff;
                            display: table-cell;
                            text-align: left;
                            vertical-align: middle;
                        "
                    >
                        <a
                            href="#"
                            style="
                                text-decoration: none;
                                font-weight: 500;
                                font-size: 12px;
                                color: #ffffff;
                                line-height: 30px;
                                background-color: #232835;
                                margin-left: 51px;
                                margin-top: 7px;
                                padding: 6px 36px 6px 36px;
                                border-radius: 3px;
                                letter-spacing: -2%;
                                font-family: 'Poppins', Arial, sans-serif;
                            "
                            >RESETUJ HASŁO</a
                        >
                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            padding: 13px 0 0 53px;
                            font-weight: 400;
                            font-size: 12px !important;
                            line-height: 18px;
                            height: 18px;
                            width: 316px;
                        "
                    >
                        W razie problemów skontaktuj się z administratorem
                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            padding: 9px 0 0 53px;
                            font-weight: 500;
                            font-size: 12px !important;
                            line-height: 18px;
                            height: 54px;
                            width: 140px;
                        "
                    >
                        Imię Nazwisko <br/>
                        500 500 500 <br/>
                        admin@nevomo.com

                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            padding: 17px 0 0 53px;
                            font-weight: 400;
                            font-size: 12px !important;
                            line-height: 18px;
                            height: 18px;
                            width: 84px;
                        "
                    >
                        Pozdrawiamy,
                    </td>
                </tr>
                <tr>
                    <td>
                        <img
                            src="https://i.ibb.co/YhtGLnf/nevomo-logo-orange.png" alt="nevomo-logo-orange" border="0"
                            style="
                                display: block;
                                width: 112.17px;
                                height: 15.74px;
                                padding: 12.13px 0 0 56.41px;
                                color: #eb5d1c;
                            "
                            alt="logo"
                        />
                    </td>
                </tr>
                <tr>
                    <td
                        style="
                            padding: 7.6px 0 64px 53px;
                            font-weight: 400;
                            font-size: 11px !important;
                            line-height: 16.5px;
                            height: 51px;
                            width: 206px;
                        "
                    >
                        ul.Mińska 63A lok.245 <br/>
                        03-828 Warszawa <br/>
                        www | facebook | instagram | linkedin

                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

内容的提问来源于stack exchange，提问作者marcinb1986