刪除單元格填充（用於電子郵件）

Question

我問為什么在以下代碼的單元格中有1px的填充：

  <table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;"> <tr> <td rowspan=2 style="vertical-align: top;"> <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;"> </td> <td colspan=2 style="text-align: center;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $ </td> </tr> <tr> <td> 20e </td> <td> -60 % </td> </tr> </tr> </table> 

我希望圖像沒有頂部和左側padding 。 而且我不能使用padding屬性。 閱讀CSS table規范時，我讀到如果一行上有不同height的單元格，則添加了額外的padding ，但是即使強制每個單元格具有相同的height也無法解決該問題。

Answer 1

根據你所說的

而且我不能使用padding屬性

在我看來，您正在將此代碼用於電子郵件目的。

因此，這是一個可行的解決方案，方法是使用table的舊cellpadding和cellspacing屬性（另外，我在img添加了display:block來解決由img作為內聯元素引起的差距）

 <table cellpadding="0" cellspacing="0" style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;"> <tr> <td rowspan="2" style="vertical-align: top;"> <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;display:block" /> </td> <td colspan="2" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $</td> </tr> <tr> <td>20e</td> <td>-60 %</td> </tr> </table> 

如果這不是出於電子郵件目的，請不要使用cellpadding或cellspacing因為它們已被棄用，因此您必須改為使用CSS屬性，例如padding 。

Answer 2

瀏覽器具有內部樣式表，該樣式表定義了該瀏覽器的默認樣式。

就我而言，Firefox具有（ 請在源代碼中查看 ）

td {
  padding: 1px;
}

您可以使用刪除它

td {
  padding: 0;
}

 td { padding: 0; } 

 <table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;"> <tr> <td rowspan=2 style="vertical-align: top;"> <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;"> </td> <td colspan=2 style="text-align: center;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $ </td> </tr> <tr> <td> 20e </td> <td> -60 % </td> </tr> </table> 

Answer 3

僅添加* { margin: 0; padding: 0;} * { margin: 0; padding: 0;}位於每個CSS文件的頂部，而不必在任何地方處理覆蓋默認的padding和margin值。

http://jsfiddle.net/50cg5fyj/