css - 在换行列表上使用边距将不起作用。边距：顶部始终为 0

Question

http://jsfiddle.net/MqPDH/10/

为什么第一次包装.wp-list margin: 10px 和.a .b使用margin: 10px不起作用？

.wp{
    background-color: blue;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 450px;
}
.wp_list{
    background-color: red;
    margin: 10px;
    height: 130px;
    position:relative;
}
.a, .b, .c{
    background-color: gray;
}
.a{
    width: 220px;
    height: 30px;
    margin: 10px;
}
.b{
    width: 220px;
    height: 100px;
    margin: 10px;
}
.c{
    width: 130px;
    height: 130px;
    top:0;
    right:0;
    position:absolute;
}

HTML：

<div class="wp">
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    // generate from php
</div>

Answer 1

这主要是因为它表现为内联元素。添加display: inline-block;

.wp_ist{
    display: inline-block;
    background-color: red;
    margin: 10px;
    height: 130px;
    position:relative;
}

Answer 2

垂直边距可能会在块级元素上折叠，这意味着当您有一个10px在底部设置了边距的元素，然后是5px在顶部设置了边距的元素时。两者之间的边距不会是15px，而是会塌陷到两者中的最大者：10px，或者在这种情况下，当它们都是 时10px，它将塌陷为10px。

您应该添加display: inline-block;到.a, .b, .c，这将解决它：

.a, .b, .c{
    background-color: gray;
    display: inline-block;  
}

jsFiddle