浮动DIV的保证金

Question

如何在浮动元素上应用保证金？我试图将这3个盒子居中并在它们之间添加空格。

<div id="background">
    <div class="box">
    1
    </div>
    <div class="box">
    2
    </div>
    <div class="box">
    3
    <div>
</div>

CSS：

#background
{
width:530px;
height:160px;
background-color:gray;   
overflow:hide;
padding:5px;
}

.box
{
background-color:white;
width:160px;
height:150px;
float:left;
margin:auto;
border: 1px solid blue;
}

链接在下面的jsfiddle。

[1]: http://jsfiddle.net/P63Sw/

Answer 1

css代码中的位更改

#background {
    width:530px;
    display: table-cell;    <!--just to make it appear as a table-cell so than we can use vertical align and text-align on it-->
    vertical-align:middle;  <!--just to align in the middle vertically-->
    height:160px;
    background-color:gray;
    overflow:hide;
    padding:5px;
    text-align: center;     <!--will align it horizontally center-->
}
.box {
    background-color:white;
    width:160px;
    display: inline-block;
    height:150px;
    border: 1px solid blue;
}