为什么我的表格单元格似乎有填充，即使我已将其设置为没有？答案

【问题标题】：Why does my table cell appear to have padding even though I've set it not to?为什么我的表格单元格似乎有填充，即使我已将其设置为没有？
【发布时间】：2011-05-15 18:35:49
【问题描述】：

我创建了一个没有边距、填充或边框的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 类应用于多少元素，似乎每个表格单元格周围都有一个“填充”，在图像和文本之间创建了一个空间。

如何删除它？

【问题讨论】：

不是答案，但我建议您只使用 property-name: 0 （0 0 0 0 的简写版本）......现在的方式没有问题，但是如果只有一个 0，它只会更容易阅读。使用“0 0 0 0”方法适用于任何边缘的宽度不同。
有同样的问题，删除高度属性为我做了这项工作

标签： html css margin tablelayout

【解决方案1】：

表格本身也提供填充。所以表定义需要是

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

【讨论】：

谢谢。我只是尝试过，但没有任何区别。我可以应用类似于单元格本身的东西吗？

【解决方案2】：

它可能不是填充试试这个

border-collapse:collapse;

【讨论】：

【解决方案3】：

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

将图像设置为display: block 以避免这种情况（或使用vertical-align）

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

【讨论】：

display:block 在这里没有作用。
我可以补充一点，表格仅用于（并且一直）用于数据显示 - 因此不适用于页面布局，甚至只是页面布局的一部分。如果您使用此表进行布局，请尝试改用 div。使用 div 实现布局的方法有很多——例如浮动/清除列，如果您希望在页面中间放置一个“列”（因此所有内容都在浏览器视口中居中显示），则边缘定位等等。跨度>

【解决方案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>

（移除高度）

【讨论】：

当您在表格单元格上设置vertical-align: top|middle|bottom 时，也会发生此行为。浏览器在单元格内容的上方和/或下方填充填充以实现所需的垂直对齐。

【解决方案5】：

折叠边距

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

当我最不希望发生的时候，崩溃的边距总是会回来咬我，而且调试起来非常棘手。

【讨论】：

【解决方案6】：

将此添加到您的 tr 和 td 中

cellpadding="0"
cellspacing="0"

【讨论】：

【解决方案7】：

/* 移除内边距和边距 */

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

【讨论】：