父母和孩子之间的差距块

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

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

我不明白这种现象的原因。

最好的问候。

来源

2013-12-15 Mario del Valle