外边距合并,对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上边距会与子元素的上边距合并,合并后的外边距取两者中的较大者。即使父元素的上外边距为0,也会发生合并。
即为当父盒子里的子盒子给它一个margin值时,子盒子的移动会影响父盒子一起移动:
这里当子盒子给了margin-top: 100px时,没有达到预想效果,父盒子与子盒子一起向下移动100px
解决办法:
- 为父元素定义上边框 例如:border:1px solid #fff;
- 为父元素定义上内边框 例如:padding:1px;
- 为父元素添加overflow:hidden;