显示为表格单元格

我在玩弄display属性，试图获取它们的挂钩。显示为表格单元格

我有一个问题是如何获得表格单元格之间的间距。现在我有4个图像相互装箱。我想让它们紧挨着左侧，但是它们之间有间距。所以除了左边以外的其他地方也是如此我尝试使用border-spacing: 5px;，但在左侧增加了间距。

我把一个版本放在jsfiddle中，但它的渲染与另一个问题。在jsfiddle中显示行之间的空间。不知道为什么会发生这种情况，因为它在大衣中正常工作。

http://jsfiddle.net/chapster11/RjGaX/

来源

2011-07-16 Chapsterj

您需要添加padding:5px 5px 5px 0;到#displayWrapper #grid .gridImage得到甚至填充。

这条规则说加padding5px到top，right和bottom和0 padding到left。

添加img {vertical-align:bottom;}修复底部的额外空间。

http://jsfiddle.net/jasongennaro/RjGaX/3/

来源

2011-07-16 04:13:58

通过添加填充到gridImage它会给我间距，但间距将在图像边框内。我希望间距超出边界。 – Chapsterj

另外我怎么不需要添加IMG {vertical-align：bottom;}当从其他地方查看，但jsfiddle – Chapsterj

@Chapsterj。不确定小提琴外面的“img”路线？关于间距：添加'border-spacing：5px;'到你的表格元素（'#displayWrapper＃grid'）。 http://jsfiddle.net/jasongennaro/RjGaX/5/不幸的是，这使得间距均匀。如果你想要在图像之间进行间距，而不是在左侧，你需要将'img's包裹在'div'中，并向三边添加填充。 –

您需要设置border-collapse:separate;，使您的border-spacing实际上是两个单元的边界之间。

来源

2011-07-19 12:57:53

add display：block;到img

来源

2013-11-15 13:56:36

显示为表格单元格

回答

相关问题