【问题标题】:Why in HTML tamplate I get extra white space?为什么在 HTML 模板中我得到额外的空格?
【发布时间】:2021-08-24 22:00:41
【问题描述】:

我准备了 html 模板,但遇到了问题。当我在 gmail 中打开它时,我会得到额外的空白。在 Outlook 中,它应该可以正常工作。我认为需要在 head 中添加一些依赖项,但不知道是哪一个。

它应该是这样的:

它在 gmail 中的外观如下:

这是我的html代码:

<!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>
            table { font-family: 'Poppins';}
        </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';
        "
    >
        <table
            align="left"
            cellpadding="0"
            cellspacing="0"
            style="
                border: 0;
                background: #ffffff;
                width: 412px !important;
                height: 436px;
            "
        >
            <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%;
                            "
                            >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="
                                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>

我该如何解决?

【问题讨论】:

    标签: html css gmail


    【解决方案1】:

    我不确定这一点,但很有可能 gmail 正在读取您的 html 中的换行符并在电子邮件中添加换行符。它不一定与会忽略额外空白的浏览器相同。电子邮件中的 HTML 行为不同。

    所以试着改成这个(不要在结束标记前添加换行符)

    <td
        style="padding: 7.6px 0 64px 53px;
            font-weight: 400;
            font-size: 11px !important;
            line-height: 16.5px;
            height: 51px;
            width: 206px;">
    

    或关闭所有休息时间(最安全)

    <td style="padding: 7.6px 0 64px 53px; font-weight: 400; font-size: 11px !important; line-height: 16.5px; height: 51px; width: 206px;">
    

    需要换行时使用&lt;br /&gt;

    【讨论】:

    • 修复了它。我不得不更改选择器并将每个文本行放在单独的 和 中。作品。我有另一个问题,但我会在下一篇文章中讨论它
    猜你喜欢
    • 2013-07-24
    • 1970-01-01
    • 1970-01-01
    • 2015-06-20
    • 1970-01-01
    • 2023-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多