HTML+CSS+JavaScript

Здравствуйте,
объясните пожалуйста что за ерунда....

<div style="border:1px solid red;">   <div style="height:120px;"> ///// < -- тут бордюр / без бордюра     <div style="border:1px solid green; margin-top:70px; height:20px;"></div>   </div> </div>

если в диве, который 120 точек высотой, задать бордер, то общая высота первого (с красной обводкой) и этого дива, именно 120 точек.... но если убрать бордер, то к 120 точках плюсуется 70 точек марджина и соответственно дивы больше 120. от чего так выходит???

либо родительскому блока с margin-top: 70px; задать overflow: hidden; либо вместо маргина использовать паддинг