为什么我的表格单元格看起来有填充，即使我已将其设置为不填充？

Question

我创建了一个

skinny

CSS 类，没有边距、填充或边框：

.skinny
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0 0 0 0;
}

我将其应用到包含图像的行，该图像也应用了

skinny

类：

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

我试图让图像尽可能接近下一个单元格中的

<h1>

文本，以便它们从左到右相互推挤。

但是，无论我将

skinny

类应用到多少个元素，每个表格单元格周围似乎都有类似“填充”的东西，在图像和文本之间创建了一个空间。

如何删除它？

Answer 1

桌子本身也有填充。 所以表定义需要是

<table width="400px" height="180px" class="skinny" cellspacing="0" cellpadding="0">

Answer 2

可能不是填充物 试试这个吧

border-collapse:collapse;

Answer 3

图像是内联元素，位于基线上，它们被视为没有下伸部的字母（即像 a、b 和 c，但不是 g、j 和 y）。

将图像设置为

display: block

以避免这种情况（或使用

vertical-align

旋转）

更好的是，因为看起来你有一个 1x2 的桌子：不要使用表格进行布局

Answer 4

我遇到了同样的问题，并用谷歌搜索了几个小时。问题在于设置

td

元素的高度。如果内容高度为 60px，td 高度为 120px，则顶部和底部各有 30px 的填充。

所以正确答案是：

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

（移除高度）

Answer 5

边缘塌陷

迟到了，但这是因为你的 h1 标签很可能在顶部或底部有一些边距。边距一直折叠到 dom 中最上面的元素，直到找到 padding-top 或 padding-bottom 不等于 0 的元素（这会中断折叠）。这是一个非常令人恼火的功能。

崩溃的边距总是在我最意想不到的时候回来咬我，而且调试起来非常棘手。

Answer 6

将此添加到您的

tr

和

td

cellpadding="0"
cellspacing="0"

Answer 7

对我来说，这是一个

line-height

的

<td>

和我放置在其中的

<div>

之间不匹配的问题，而这又是由顺风

text-*

类引起的。

Answer 8

/* 删除内边距和边距 */

*  
    { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}