Div包装器 - 删除边框和填充时带有margin-top的奇怪行为

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%
}