外边距合并，对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上边距合并，合并后的外边距取两者中的较大者。即使父元素的上外边距为0，也会发生合并。
即为当父盒子里的子盒子给它一个margin值时，子盒子的移动会影响父盒子一起移动：
这里当子盒子给了margin-top: 20px时，没有达到预想效果，使得与父盒子分离并距离20px。
解决方法：
一、给父盒子加上overflow: hidden;
二、给父盒子加padding: 1px;目的是让子盒子能顺利掉下来，当然这是需要内边距时再使用；
三、给父盒子加border: 1px solid #ccc;目的跟二一样是为了撑大盒子，使子盒子顺利与父盒子分隔，当然这是需要边框时再使用。
综上建议使用第一种方法。
效果如图：
就顺利与父盒子分隔开来了。
基础学习第一天(关于盒子外边距合并)
猜你喜欢
转载自blog.csdn.net/qq_48784569/article/details/107088675
今日推荐
周排行