删除表格行之间的间距

我已经浏览了许多关于此问题的类似标题问题，并尝试了许多已接受的答案，但仍收到不需要的行空格。像许多问题一样，我正在制作一个电子邮件模板，所以我必须使用嵌套表格来获取我想要的结构，但要使其能够在电子邮件中正确呈现。删除表格行之间的间距

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

CELLSPACING = 0
cellpading = 0
边界崩溃：崩溃
边框间距：0
保证金：0 0 0 0
style =“display：block”for my image

这些都不能改变，我无法摆脱行空间。这发生在Chrome/IE/Firefox中。

enter image description here

<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>

来源

2015-04-14 JWiley

添加填充：0帮助？从你提供的CSS，我没有看到明确的填充初始化。 Probaby的P [加入是什么加入空间 – Sai

我刚刚意识到这是什么。当我为custinfo头文件创建额外的CSS样式时，我没有添加边距：0部分 – JWiley

你应该避免保证金倒塌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

来源

2015-04-14 15:12:37 emmanuel

是的，这是我的custinfo h1和h2属性。 – JWiley

添加保证金：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; 
}

来源

2015-04-14 15:13:24 Faiz

删除表格行之间的间距

回答

相关问题