非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.8 盒子模型-margin上下折叠问题

た入场券 2024-03-26 21:04 23阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.8 盒子模型-margin上下折叠问题
             *   *  10.8.1 上下margin的折叠
                 *  10.8.2 上下margin折叠的情况

![在这里插入图片描述][3ef1f2a131d948fa85d5da58b2e6822c.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.8 盒子模型-margin上下折叠问题 #####

###### 10.8.1 上下margin的折叠 ######

*  垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
            .box1 {
                
              height: 100px;
              background-color: #f00;
        
              margin-bottom: 30px;
            }
        
            .box2 {
                
              height: 100px;
              background-color: #0f0;
        
              margin-top: 50px;
            }
          </style>
        </head>
        
        <body>
        
          <div class="box1"></div>
          <div class="box2"></div>
        
        </body>
        
        </html>
    
    渲染效果
    
    ![在这里插入图片描述][b1fbb626781545d683d557fb676cf65e.png_pic_center]
    
    很明显这里没有80，而是50
 *  水平方向上的margin（margin-left、margin-right）永远不会collapse【左右不会相加】
 *  折叠后最终值的计算规则
    
     *  两个值进行比较，取较大的值
 *  如何防止margin collapse？
    
     *  只设置其中一个元素的margin

###### 10.8.2 上下margin折叠的情况 ######

*  两个兄弟块级元素之间上下margin的折叠
    
    ![在这里插入图片描述][40048786e3914aa7a55376d8ea9fa109.png_pic_center]
 *  父子块级元素之间margin的折叠
    
    ![在这里插入图片描述][da76ae805e254c03802190803bc5d538.png_pic_center]

[3ef1f2a131d948fa85d5da58b2e6822c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f0edce5023324df1acb61669d78b96a7.png
[b1fbb626781545d683d557fb676cf65e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a839468a31794997879397f461eb96fa.png
[40048786e3914aa7a55376d8ea9fa109.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/34a4610831a5477ca7af452ca9149ee1.png
[da76ae805e254c03802190803bc5d538.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/71832ceee7f14fb1bb6742f834e288bf.png