Поля между родительским и дочерним блоками

После долгого времени у меня есть вопрос.

Я не понимаю, почему эта проблема возникает

В примере 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%;
}

Я не понимаю причины такого поведения.

С наилучшими пожеланиями.