非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.6 盒子模型-padding和margin的对比

Dear 丶 2024-03-26 21:04 62阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.6 盒子模型-padding和margin的对比

![在这里插入图片描述][0ca560af38d14ada8a68f0027542076a.png_pic_center]

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

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

##### 10.6 盒子模型-padding和margin的对比 #####

<!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>
        .box {
          
          width: 300px;
          height: 300px;
          background-color: #f00;
    
          /* padding-left: 30px;
          box-sizing: border-box; */
          /* overflow: auto; */
          padding-top: 100px;
          box-sizing: border-box;
        }
    
        .container {
          
          width: 100px;
          height: 100px;
          background-color: #0f0;
    
          margin-left: 100px;
          /* margin-top: 100px; */
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <div class="container"></div>
      </div>
    
    </body>
    
    </html>

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

[0ca560af38d14ada8a68f0027542076a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/db3000dc36264e10baff2c08f8d8e181.png
[b3d09fc0049f45e3b347e8be865570a4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c0a3bdac1aa843bcb1a5f0a3b0a4ccde.png