CSS3-盒子模型-边距问题

    1 清除默认内外边距
        场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
            比如：body标签默认有margin：8px、p标签默认有上下的margin、ul标签默认由上下的margin和padding-left ……
        解决方法：
            *{
                margin: 0;
                padding: 0;
                /* 盒子自动内减*/
                box-sizing:border-box;
            }

    2 外边距折叠现象
        正常情况：
            场景：水平布局的盒子，左右的margin正常，互不影响
            结果：最终两者距离为左右margin的和
        
        合并现象：
            场景：垂直布局 的 块级元素，上下的margin会合并
            结果：最终两者距离为margin的最大值
            解决方法：避免就好，只给其中一个盒子设置margin即可

        塌陷现象(坑爹)：
            场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上 因为父子的上外边界margin-top重合了
            结果：导致父元素一起往下移动
            解决方法：
                1 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
                2 给父元素设置overflow：hidden;
                3 转换成行内块元素 display:inline-block;

    3 行内元素的margin和padding无效情况
        场景：给行内元素设置margin和padding时
        结果：
            1 水平方向的margin和padding布局中有效
            2 垂直方向的margin和padding布局中无效，而padding-bottom 会和 div 重叠,因为行内元素不会因 padding 而占据更多空间,它们会按照文本流排列。

代码：清除默认外边距

效果图：注意上面和左边的边距变化

          

 

 

代码：盒子外边距合并

    
    
    
    


    
盒子一
    
盒子二

效果图：

 

 

代码：盒子外边距塌陷

效果图：

 

代码：行内元素的margin和padding无效情况

    
    
    
    


    

    1我是一个行内元素12我是一个行内元素23我是一个行内元素3
    

效果图：