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

它可能不是填充试试这个

border-collapse:collapse;

Answer 2

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

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

Answer 3

我遇到了同样的问题，并用Google搜索了几个小时。问题是在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 4

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

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

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

Answer 5

折叠边距

派对晚了，但这是因为你的h1标签很可能有一些上边距或下边距。边距一直向上折叠到dom中最上面的元素，直到它找到一个填充顶部或填充底部不等于0的元素（这会中断折叠）。这是一个非常令人愤怒的特征。

当我最不期望它时，折叠边缘总会回来咬我，而且调试非常棘手。

Answer 6

将此添加到您的tr＆amp; td＆＃39; S

cellpadding="0"
cellspacing="0"

Answer 7

/ *删除填充和边距* /

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

为什么我的表格单元格似乎有填充，即使我没有设置它？

7 个答案: