我已经查看了许多关于此问题的类似标题的问题，并尝试了许多已接受的答案，但仍然得到不需要的行空间。像许多问题一样，我正在制作一个电子邮件模板，所以我必须使用嵌套表格来获得我想要的结构，而且要使其在电子邮件中正确呈现。
我尝试过但没有奏效的解决方案:
- 单元格间距 = 0
- 单元格填充 = 0
- 边框折叠:折叠
- 边框间距:0
- 边距:0 0 0 0
- style="display: block"我的图片
这些似乎都没有什么区别，我无法摆脱行空间。这发生在 Chrome/IE/Firefox 中。
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>
Title
</title>
<style type="text/css">
a:hover { text-decoration: none !important; }
.header h1 {color: #055d90; font: normal 25px Georgia, Times, serif; margin: 0; font-weight: bold; padding: 0 0 0px 0; line-height: 39px; margin-top: 0;}
.header p {color: #cf373e; font: normal 17px Georgia, Times, serif; margin: 0; padding: 0; line-height: 12px; font-style: italic;}
.custinfo h1 {color: #FFFFFF; font: normal 25px Tahoma, Times, serif; background-color: #FF8000; padding: 10px 0 10px 0;}
.custinfo h2 {color: #FFFFFF; font: normal 15px Tahoma, Times, serif; background-color: #707070; padding: 0 0 0 0;}
.table {border-collapse: collapse;}
.table td {margin: 0; padding: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table align="left" width="100%" class="table">
<tr>
<!--header-->
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;">
<tr>
<td valign="top">
<img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100">
</td>
</tr>
<tr>
<td valign="top" align="middle" class="header" width="100%">
<h1>Order</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td width="50%">
<h1>[DISTRIBUTOR NAME]</h1>
</td>
<td align="middle">
<h1>[ORDER DATE]</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td >
<h2>Customer [COMPANY NAME]</h2>
</td>
<td >
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
<tr class="custinfo" style="margin:0">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td>
<h2>Customer [COMPANY NAME]</h2>
</td>
<td>
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
最佳答案
您应该防止 h1、h2 元素发生边距折叠。
h1, h2 {
margin: 0;
}
a:hover {
text-decoration: none !important;
}
.header h1 {
color: #055d90;
font: normal 25px Georgia, Times, serif;
margin: 0;
font-weight: bold;
padding: 0 0 0px 0;
line-height: 39px;
margin-top: 0;
}
.header p {
color: #cf373e;
font: normal 17px Georgia, Times, serif;
margin: 0;
padding: 0;
line-height: 12px;
font-style: italic;
}
.custinfo h1 {
color: #FFFFFF;
font: normal 25px Tahoma, Times, serif;
background-color: #FF8000;
padding: 10px 0 10px 0;
}
.custinfo h2 {
color: #FFFFFF;
font: normal 15px Tahoma, Times, serif;
background-color: #707070;
padding: 0 0 0 0;
}
.table {
border-collapse: collapse;
}
.table td {
margin: 0;
padding: 0;
display: block;
}
h1,
h2 {
margin: 0;
}<table align="left" width="100%" class="table">
<tr>
<!--header-->
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin-top: 0;">
<tr>
<td valign="top">
<img src="images/logo.gif" style="display: block; border: 0" alt="" width="200" height="100">
</td>
</tr>
<tr>
<td valign="top" align="middle" class="header" width="100%">
<h1>Order</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td width="50%">
<h1>[DISTRIBUTOR NAME]</h1>
</td>
<td align="middle">
<h1>[ORDER DATE]</h1>
</td>
</tr>
</table>
<table class="table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr class="custinfo">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td>
<h2>Customer [COMPANY NAME]</h2>
</td>
<td>
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
<tr class="custinfo" style="margin:0">
<td>
<h2>PO# [PO NUMBER]</h2>
</td>
<td>
<h2>Customer [COMPANY NAME]</h2>
</td>
<td>
<h2>Total Order [TOTAL ORDER]</h2>
</td>
</tr>
</table>关于html - 删除表格行之间的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29630995/