Question

I’m trying to stack these “blocks” with some margins between them. The problem is that they do not “block” with 3 pixels of space between them. They just stacks at top of each other (typical div tags).

<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>​

Why does it not work? Demo: http://jsfiddle.net/edgren/Y9gCG/

Thanks in advance.

Answer 1

You should use a stylesheet.

Other thant that,
The inline-block and other css statements must be on the children divs :

<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>​

with a stylesheet : *

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>​