html - 父 block 和子 block 之间的边距

Question

过了这么久我有新手问题。

我不明白为什么会出现这个问题

在示例 1 中，预期结果是正确的，应用父级(灰色)和子级(红色)之间的边距。

http://jsfiddle.net/48nTD/1/

HTML

<div class="parent odd">
    <div class="block"></div>
</div>
<div class="parent even">
    <div class="block"></div>
</div>

CSS

.parent{
    height: 200px;
    padding: 20px;
}

.odd{
    background: #dddddd;
}

.even{
    background: #bbbbbb;
}

.block{
    width: 40%;
    height: 40px;
    background: red;
    margin-top: 20px;
    margin-left: 60px;
}

在示例 2 中，结果不符合预期，不应用父级(深灰色)和您的子级(绿色)之间的边距

将边距应用到子项，但在视觉上向下放置 block 子项的父项。

http://jsfiddle.net/GUYjJ/

HTML

<section class="row">
    <div class="block left"></div>
    <div class="block right"></div>
</section>
<section class="row features">
    <div class="block"></div>
</section>

CSS

.row{
    height: 540px;
}

.block{
    height: 320px;
    margin-top: 100px;
}

.left, .right{
    width: 40%;
}

.left{
    background: red;
    float: left;
}

.right{
    background: blue;
    float: right;
}

.features{
    background: #454545;
}

.features .block{
    background: green;
    width: 60%;
}

我不明白这种行为的原因。

最好的问候。

Answer 1

向 .features 添加一些填充

.features{padding-top:1px;}

DEMO here.