Css 浮动股息保证金

如何在浮动元素上应用边距？我正在尝试将这3个框居中，并在它们之间添加空格

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

下面是jsfiddle上的链接

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

---

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;
}

#背景{
宽度：530px；
显示：表格单元格；
垂直对齐：中间对齐；
高度：160px；
背景颜色：灰色；
溢出：隐藏；
填充物：5px；
文本对齐：居中；
}
.盒子{
背景色：白色；
宽度：160px；
显示：内联块；
高度：150像素；
边框：1px纯蓝色；
}

在获得更多反对票之前更新您的问题。。添加相关代码。添加链接到小提琴甚至不起作用。。在你的问题中添加代码明白了，很抱歉@Pilot.看一看@Pilot谢谢！这正是我想要做的，但最后一件事是如何垂直对齐框？它已经在左边和右边居中了，顶部和底部呢？@Pilot真棒！非常感谢你！！

#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;
}