Question

我问以下代码中为什么在单元格中有1px的填充：

＆＃13;

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

＆＃13;

我希望图片没有顶部和左侧padding。我无法使用padding属性。阅读CSS table规范，我读到如果一行中有不同padding的单元格，则会添加额外的height，但甚至会强制每个单元格具有相同的height set_of_A_key我没有解决这个问题。

Answer 1

基于你所说的

我无法使用padding属性

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

所以，这是一个可能的解决方案，使用cellpadding的旧cellspacing和table属性（加上我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或padding，因为它们已被弃用，因此您必须使用CSS属性，例如{{1 }}

Answer 2

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

就我而言，Firefox有（see it in the source code）

td {
  padding: 1px;
}

您可以使用

将其删除

td {
  padding: 0;
}

＆＃13;

td {
  padding: 0;
}

＆＃13;

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

＆＃13;

Answer 3

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

http://jsfiddle.net/50cg5fyj/

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

3 个答案: