用CSS3 box-sizing 属性实现两个并排的容器，如果想让容器中间有间隔该如何实现

Question

"
<style>
.container{
margin: 10px 20px;
height: auto;
overflow: hidden;
}
.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; / Safari */
width:50%;
float: left;
height: 80px;
margin-bottom: 10px;
background: #fff;
border-top: 5px solid #004389;
text-align: center;
}
</style>

        <p class="container">
            <p class="box">
                <a href="" class="post">产品经理</a>
                <span>广州</span>
                <span class="salary">10k-15k</span>
            </p>
            <p class="box">
                <a href="" class="post">产品经理</a>
                <span>广州</span>
                <span class="salary">10k-15k</span>
            </p>
        </p>

``
想实现两个并排的容器中有一定的间隔，并且浏览器宽度改变时，间隔宽度不变

Answer 1

設定下margin值就行了，不過寬度要稍微調整下

Answer 2

。

Answer 3

margin外邊框補白。

Answer 4

簡單的設定透明 border
或是直接再套一層用什麼都可以了

Answer 5

如果你想在整體的佈局上面達到統一的間距效果，建議你才用css3的彈性盒子佈局(box-flex)