关于 div 嵌套,该如何解决

关于 div 嵌套

我用chrome查看，<div class="list_manager_top5_in"> margin的上边5px，怎么在<div class="list_manager_top5_out">外边了？

不是应该包含在里边的吗，求解？

    <div class="list_manager_top5_out">
        <div class="list_manager_top5_in">
            <div >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div >
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

.list_manager_top5_out
{
    width:100%;
    clear:both;
    height: 100px; 
    background-color: #E4ECF5;
    }
    
 .list_manager_top5_in
{
    padding:5px 0 0 25px;
    margin:5px;
    clear:both;
    border:1px solid black;
    }   

[解决办法]
估计是浏览器兼容性问题，我用谷歌和火狐测试的时候都是一样情况，IE就显示正常。
这个问题发生的原因是嵌套内的第一个块元素设置了margin-top；
这样这个块元素就会破开它的父元素（我也不知道是不是破开，反正意思你懂就行），这样就把它的父元素整个往下顶。
兼容性修补：使用父元素设置padding-top替代第一个子元素的margin-top;
就是这样：

    .list_manager_top5_out
   {
    width:100%;
    clear:both;
    height: 100px; 
    background-color: #E4ECF5;
    (padding-top:5px;)
    }
     
    .list_manager_top5_in
   {
    padding:5px 0 0 25px;
    margin:5px;
    clear:both;
    border:1px solid black;
    (margin-top:0;)
    }  

查看更多 下一篇