子盒子设置上外边距，父盒子也会移动，与子元素的生成框的类型有关

为什么子元素 display: block;时会移动，而子元素为 display： inline-block; 时不会动

 .box {
        width: 300px;
        height: 300px;
        background: #ccc;
    }
    .inner {
    /*
                display: inline-block;
    */
         
                width: 100px;
                height: 100px;
        background: #f00;
        margin-top: 100px;
    }
     
    <div class="box">
        <div class="inner"></div>
    </div>

慕侠357404 2019-07-19

源自：动态文章列表效果 2-6 编程练习

收起

2回答

樱桃小胖子 2019-07-19 15:47:02

1、子元素设置margin影响父元素的原因：

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)或者父元素没有形成BFC的话，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠，说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦，只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin，防止它越级，把自己的margin当成领导的margin执行。

2、display:inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联元素会被排列在同一行内，而inline对象（即行内元素）只有margin-left和margin-right是有效的（这个是行内元素的特性），margin-top是无效的，所以，当你给子元素设置了display:inline-block以后，margin-top就失效了，所以影响不到父元素。

希望可以帮到你！

收起回答

提问者慕侠357404 #1

不好意思，有点不能理解，如果子元素设置了display:inline-block以后， margin-top 失效的话，为什么子元素会向下移动？我网上查的解释是： display:inline-block创建了 BFC ，阻止了外边距合并。

2019-07-19 19:42:26
樱桃小胖子回复提问者慕侠357404 #2

关于设置了display:inline-block之后，margin-top不合并的问题，上面老师解释的确实过于片面。同学理解的是正确的，非常抱歉给您的学习带来了不便，后面老师也一定更加严格要求自己，正确能够更加清晰明了的帮助大家解答疑惑。祝学习愉快！

2019-07-20 12:00:53