如何刪除tr之間的空格

Question

我正在設計一個 HTML 電子郵件模板，在下面的代碼中，我在刪除 tr 下方的間距以及刪除 tr 之間的空格時遇到了問題。 我附上了我的問題截圖。 你能解決我的問題嗎？

在此處輸入圖片說明

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

您可以為img標簽設置vertical-align和margin-bottom css 屬性：

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

如何刪除tr之間的空格

問題描述

1 個解決方案

解決方案1
0 2019-12-25 06:27:49

如何刪除tr之間的空格

問題描述

1 個解決方案

解決方案1 0 2019-12-25 06:27:49

解決方案1
0 2019-12-25 06:27:49