内联块不堆叠我的“块”

问题描述：

我试图堆叠这些“块”之间的一些利润。问题在于它们不会“阻塞”它们之间的3个像素的空间。他们只是堆叠在一起（典型的div标签）。内联块不堆叠我的“块”

<div style="display: inline-block; margin: 3px; vertical-align: middle;"> 
    <div style="background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px;"></div> 
</div>

为什么它不起作用？演示：http://jsfiddle.net/edgren/Y9gCG/

在此先感谢。

答

您应该使用样式表。

其他吴丹说，的inline-block和其他CSS语句必须对孩子的DIV：

<div> 
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div> 
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div> 
</div>

用样式表：*

CSS

.child{ 
    margin: 3px; 
    vertical-align: middle; 
    display: inline-block; 
    background-color: #000000; 
    height: 100px; 
    width: 100px; 
}

HTML

<div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

非常感谢！你的答案像魅力一样工作^^我会尽可能地接受它。 – Erik

答

在内部div上应用边距，而不是父级。

答

这里是展示如何做到这一点小提琴：http://jsfiddle.net/Y9gCG/3/

div.container div { 
margin-bottom:3px; 
background-color: #000; 
height: 100px; 
width: 100px;" 
}

答

要添加的保证金和inline-block的财产父元素，而不是孩子，代码改成这样：

<div> 
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div> 
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div> 
</div>

它应该工作。

内联块不堆叠我的“块”

相关推荐