Question

我正在设计一个HTML电子邮件模板，在下面的代码中，我无法删除tr下方的空格，也无法删除tr之间的空格。我已经附上了问题截图的外观。你能解决我的问题吗？

enter image description here

HTML代码：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Demystifying Email Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="" rel="stylesheet">

        <style type="text/css">
            body {
                font-family: 'Poppins', sans-serif !important;
                background-color: #fff;
            }

            .tablehead {
                max-width: 600px;
                width: 100%;
                margin: 0 auto;
                border-collapse: collapse;
            }

            table {
                border: none !important;
            }

            td {
                border: none;
                margin: 0;
            }

            tr {
                border: none;
                margin: 0;
            }
        </style>
    </head>

    <body style="margin: 0; padding: 0;">
        <table cellpadding="0" cellspacing="0" width="100%" style="background:#f3f3f3;">
            <tr>
                <td>
                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="tablehead">
                        <tr>
                            <td> <img src="https://gallery.mailchimp.com/d9f11059f6e3a8d643a2ec664/images/073fd8e8-1e89-4ec4-9365-5498789b2933.gif" style="width:100%;" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="https://gallery.mailchimp.com/d9f11059f6e3a8d643a2ec664/images/e9b50a22-75f0-49a9-af40-ed88dc15ede5.gif" style="width:100%;" />

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="https://gallery.mailchimp.com/d9f11059f6e3a8d643a2ec664/images/4122dae0-8675-4bbc-8bd3-12dd26627798.jpg" style="width:100%;" />

                            </td>
                        </tr>

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

    </html>

Answer 1

您可以为margin-bottom标签设置vertical-align和img css属性：

img {
    vertical-align: bottom;
    margin-bottom: -1px;
}

如何删除tr之间的空间

1 个答案: