父母和孩子之間的差距塊

我不明白爲什麼這個問題發生

在例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