css margin重叠合并

浅浅的花香味﹌ 2021-07-24 11:03 468阅读 0赞

产生原因:
    	当垂直方向的同级或者嵌套的盒元素(块级),并且它们之间没有非空内容、Padding或Border分隔。
    	则它们的margin会合并
    
    具体表现为:
    	同级元素：
    		上下边距会合并为同一个,取其中最大值
    	嵌套元素：
    		父元素和子元素同时设置向上会向下的margin,其中的最大值会作用到父元素上
    		子元素上也会有,但不会产生效果,级子元素不会和父元素之间产生margin，由父元素产生
    		
    解决办法：
    	 一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）
        建立了新的块格式化上下文的元素（例如，浮动盒与’overflow’不为’visible’的元素）的margin不会与它们的流内子级合并
        绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）
        内联盒的margin不会合并（甚至与它们的流内子级也不会）
        一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙
        一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙
        一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
        盒自身的margin也会合并，如果’min-height’属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其’height’为0或者’auto’，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了
    
    	简单的来讲，就是：
    
        都用float来定位（有条件要求，适用范围较广）
        为父元素添加overflow不为visiable的属性 （适用范围极广，推荐使用）
        为元素添加border（一般不用）
        使用绝对定位（适用范围较窄）
        父元素增加padding-top属性（改变尺寸，不建议使用）