股利包裝 - 古怪的行爲與邊距去除邊框和填充

Question

時，我有以下佈局：

<div class="Wrapper"> 
    <div class="WrapperInner"> 
     <div class="Content"></div> 
    </div> 
</div> 


div.Wrapper 
{ 
    width: 200px; 
    height: 200px; 
    border: 2px solid blue; 
    padding: 5px; 
} 
div.WrapperInner 
{ 
    height: 150px; 
    border: 2px solid green; 
    padding: 5px; 
} 

div.Content 
{ 
    height: 100px; 
    border: 2px solid red; 
    margin-top: 30px; 
} 

它看起來罰款。但是，如果我刪除邊框和div.WrapperInner填充，內容的margin-top是影響它還有：

div.WrapperInner 
{ 
    height: 150px; 
    border-left: 2px solid green; 
    border-right: 2px solid green; 
    /* either of the following would fix the difference: 
     padding: 1px; 
     border: 2px solid green; */ 
} 

http://jsfiddle.net/9F3Jw/

是什麼導致了這種差異？爲什麼邊框或填充物會導致內包裝被壓低？

Answer 1

有例如

http://jsfiddle.net/amkrtchyan/9F3Jw/2/

div.WrapperInnerOdd 
{ 
    overflow:hidden;// add this 
} 

http://jsfiddle.net/amkrtchyan/9F3Jw/4/或

div.WrapperInnerOdd 
{ 
    display:inline-block; 
    width: 100% 
}