删除单元格填充（用于电子邮件）

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

浏览器有一个内部样式表，它定义了该浏览器的默认样式。

就我而言，Firefox 有 (see it in the source code)

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 2

通常的做法是在每个 css 文件的顶部添加 * { margin: 0; padding: 0;}，而不必处理到处覆盖的默认填充和边距值。

http://jsfiddle.net/50cg5fyj/

Answer 3

根据你所说的

And I can't use the padding attribute

在我看来，您是将此代码用于电子邮件目的。

所以，这是一个可能的解决方案，通过为 table 使用旧的 cellpadding 和 cellspacing 属性（另外我将 display:block 添加到您的 img 来修复由于 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.

删除单元格填充（用于电子邮件）

Removing cell padding (email purposes)

html

css

html-email