2010-11-25 42 views
6

我创建不具有余量,填充物或边界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 0”方法适用于如果对于任何边都有不同宽度。 – ClarkeyBoy 2010-11-25 16:00:59

+0

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

回答

3

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

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

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

-1

/*删除填充和余量*/

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

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

0

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

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

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

+0

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

2

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

border-collapse:collapse; 
0

折叠利润率

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

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

0

添加到您的tr的& td

cellpadding="0" 
cellspacing="0" 
1

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

(除去高度)

相关问题