非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.5 盒子模型-外边距margin

╰+哭是因爲堅強的太久メ 2024-03-26 21:04 32阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.5 盒子模型-外边距margin
             *   *  10.5.1 外边距 - margin
                 *  10.5.2 margin的其他值

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

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

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

##### 10.5 盒子模型-外边距margin #####

###### 10.5.1 外边距 - margin ######

*  margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
 *  margin包括四个方向, 所以有如下的取值:
    
     *  margin-top：上内边距
     *  margin-right：右内边距
     *  margin-bottom：下内边距
     *  margin-left：左内边距
 *  margin单独编写是一个缩写属性：
    
     *  margin-top、margin-right、margin-bottom、margin-left的简写属性
     *  margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
 *  margin也并非必须是四个值, 也可以有其他值;

###### 10.5.2 margin的其他值 ######

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

<!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>
        /* 暂时解决方案 */
        body {
          
          font-size: 0;
        }
    
        .box {
          
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: #f00;
    
          /* margin-bottom: 30px; */
          /* margin-right: 30px; */
        }
    
        .container {
          
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: #0f0;
    
          /* margin-top: 30px; */
          /* margin-left: 30px; */
    
          /* 缩写属性 */
          margin: 0 20px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
      <div class="container"></div>
    
    </body>
    
    </html>

渲染效果

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

[9c4caee251194abd9254f808c21d888d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/53cf9a15f63b4c00bc756b193e309f40.png
[15e4aa167c8b4483ad11e02b8a4b9a5b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bb88b0c1bef84f74b19edf5caf175533.png
[4d179df2bc0543a89d0b6b352161eec1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/429418137ebb4cb3a622f5e6917925b0.png