css边距合并

.header和h1之间产生一点缝隙（或间距），即使将.text设置 margin:50px; ，作为块级元素的div，margin左右生效，而上下则是.header和div整体向下移动50px
为何header和div能够产生合并？即header没有border和padding（即一个可与外界隔离的边界线），导致div自带的一个margin，冲出该边界，与header合并

对于一个父元素里所嵌套的子元素。若父元素没有上边框没有上内边距，设置子元素的margin-top值时，margin-top对子元素无效，并且父元素会受到影响。
解决方案：
就是给父元素加个上边框或上内边距。
给父元素加一个overflow:hidden 样式属性

css边距1.png

对于两个同级的盒子，一个在上一个在下。若上面的盒子margin-bottom与下面的盒子margin-top一起作用时。这时，上下两个盒子的间距会选择margin-bottom 与 margin-top中最大的值。
解决方案：避免上元素的margin-top和下元素的margin-bottom一起使用！

css边距2.png