html - 父子块之间的边距

这么久以后，我有一个菜鸟问题。

我不明白为什么会发生这个问题

在示例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中，结果不符合预期，不在父级（深灰色）和您的孩子（绿色）之间应用边距

将边距应用于子项，但在视觉上沿带有子项的父项向下移动。

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

我不了解这种行为的原因。

最好的祝福。

最佳答案

在.features中添加一些填充

.features{padding-top:1px;}

DEMO here.