删除表格行之间的间距答案

【问题标题】：Remove spacing between table rows删除表格行之间的间距
【发布时间】：2015-04-14 23:21:54
【问题描述】：

我已经查看了许多有关此问题的类似标题的问题，并尝试了许多已接受的答案，但仍然得到不需要的行空间。像许多问题一样，我正在制作一个电子邮件模板，所以我必须使用嵌套表来获得我想要的结构，但它才能在电子邮件中正确呈现。

我尝试过的没有奏效的解决方案：

单元格间距 = 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>

【问题讨论】：

添加 padding:0 帮助？从您提供的 css 中，我没有看到明确的填充初始化。很可能 p[添加是添加空间
我才意识到它是什么。当我为 custinfo 标头创建额外的 css 样式时，我没有添加边距：0 部分

标签： html css html-email

【解决方案1】：

您应该防止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>

参考：Margin collapsing

【讨论】：

是的，就是这样，在我的 custinfo h1 和 h2 属性中。

【解决方案2】：

将边距：0 添加到您的 h2。如果您未定义边距 0，则边距将默认与用户代理样式表一起使用。

JSFiddle 链接

https://jsfiddle.net/aLast0qs/

CSS代码

.custinfo h2 {
  color: #FFFFFF;
  font: normal 15px Tahoma, Times, serif;
  background-color: #707070;
  padding: 0 0 0 0;
  margin: 0;
}

【讨论】：