banner设置了margin-top，头部上方为什么也空了
如图所示，header设置了fixed后盖住了banner，banner使用margin-top空出覆盖的距离，为什么header上面也会空出来下移呢？
2
收起
正在回答
2回答
确实会有同学说的问题，header会超出body，这种方法是一种比较暴力的解决方案，相对来说比较温和的解决办法如下：
希望可以帮到你！
卡布琦诺
2019-05-30 19:05:09
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠，说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦，只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin，防止它越级，把自己的margin当成领导的margin执行。这里header和banner的父元素是body，如果给body设置border或者是padding，会破坏整体布局，但是因为header设置了position:fixed;所以，可以给header设置一个固定的定位的位移量top:0即可解决
希望可以帮到你！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星