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

问题描述：

我创建不具有余量，填充物或边界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类的元素有多少，似乎都会在每个表格单元格周围出现“填充”，从而在图像和文本之间创建一个空格。

我该如何删除？

不是问题的答案，但我可以建议你只使用属性名称：0（短手版0 0 0 0）...现在它的方式没有什么问题，但是如果只有一个0，它会变得更容易。使用“0 0 0 0”方法适用于如果对于任何边都有不同宽度。 – ClarkeyBoy 2010-11-25 16:00:59

也有同样的问题，删除高度属性做了我的工作 – mervasdayi 2016-10-07 16:05:18

答

表本身也给填充。所以表定义需要是

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

谢谢。我刚刚尝试过，但没有任何区别。我可以应用类似于细胞本身的东西吗？ – 2010-11-25 15:18:55

答

/*删除填充和余量*/

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

这没有效果。 `瘦'已经这样做。 – 2010-11-25 17:23:55

答

图像被内联元件和坐在基线，它们被视为就像没有一个信下行（即像a，b和c但不是g，j和y）。

图像设置为display: block避免这种（或vertical-align摆弄）

更妙的是，因为它看起来像你有一个1x2的表：不要使用表格布局

`display：block`在这里没有效果。 – 2010-11-25 17:24:35

答

它可能不填充只是试试这个

border-collapse:collapse;

答

折叠利润率

晚会之后，但这是因为您的h1标签最有可能有顶部或底部的边缘。边界一直向上到达DOM中最上面的元素，直到找到一个带有填充顶部或填充底部的元素不等于0（这会中断塌陷）为止。这是一个非常令人生气的功能。

当我至少期待它时，崩溃边缘总会回来咬我，而且调试非常棘手。

答

添加到您的tr的& td的

cellpadding="0" 
cellspacing="0"

答

我有同样的问题，而用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>

（除去高度）

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

相关推荐