內聯塊不堆疊我的「塊」

Question

我試圖堆疊這些「塊」之間的一些利潤。問題在於它們不會「阻塞」它們之間的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/

在此先感謝。

Answer 1

您應該使用樣式表。

其他吳丹說， 的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>​ 

Answer 2

在內部div上應用邊距，而不是父級。

Answer 3

這裏是展示如何做到這一點小提琴：http://jsfiddle.net/Y9gCG/3/

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

Answer 4

要添加的保證金和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>​ 

它應該工作。