我正在设计一个 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>
最佳答案
你可以设置vertical-align和 margin-bottom img 标签的 css 属性:
img {
vertical-align: bottom;
margin-bottom: -1px;
}
关于html - 如何删除tr之间的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59475688/