刪除表格行之間的間距

我已經瀏覽了許多關於此問題的類似標題問題，並嘗試了許多已接受的答案，但仍收到不需要的行空格。像許多問題一樣，我正在製作一個電子郵件模板，所以我必須使用嵌套表格來獲取我想要的結構，但要使其能夠在電子郵件中正確呈現。刪除表格行之間的間距

我試過的解決方案都沒有奏效：

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

刪除表格行之間的間距

回答

相關問題