关于 div 嵌套

[wrost]

我用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，平生最讨厌IE的旧版本，各种奇形八怪兼容性问题.

[掌钉鱼]

估计是浏览器兼容性问题，我用谷歌和火狐测试的时候都是一样情况，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;)
    }  

[wrost]

引用 1 楼 nesaiga 的回复:

估计是浏览器兼容性问题，我用谷歌和火狐测试的时候都是一样情况，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;)
    }  

谢谢，照你说的修改，就好了。 很奇怪，为什么浏览器会有这么明显的bug