非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.3 盒子模型-内边距padding

冷不防 2024-03-25 23:53 49阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.3 盒子模型-内边距padding
             *   *  10.3.1 内边距 - padding
                 *  10.3.2 padding的其他值

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

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

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

##### 10.3 盒子模型-内边距padding #####

###### 10.3.1 内边距 - padding ######

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

###### 10.3.2 padding的其他值 ######

![在这里插入图片描述][09b04cbd4eb24678993715b7875a1a8c.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>
        .box {
          
          /* 设置一个红色的实体边框 */
          border: 1px solid red;
          display: inline-block;
    
          /* line-height */
          /* line-height: 36px; */
    
          /* 内边距: padding */
          /* padding-top: 10px;
          padding-right: 20px;
          padding-bottom: 30px;
          padding-left: 40px; */
    
          /* 等价于: 缩写属性 */
          padding: 10px 20px 30px 40px;
    
          /* 其他值的情况 */
          /* 3个值 */
          /* 省略left -> 使用right */
          padding: 10px 20px 30px;
          /* 2个值 */
          /* 省略: left -> 使用right */
          /* 省略: bottom -> 使用top */
          padding: 10px 20px;
          /* 1个值 */
          /* 上下左右都使用同一个值 */
          padding: 10px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">我是box</div>
    
    </body>
    
    </html>

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

[3b612d4d5dcb4bb2b79514a67668da1c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0fa2860707e84c30b8328a5cfbca0201.png
[09b04cbd4eb24678993715b7875a1a8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a7dba8e09ba34b17891d6c087063ebb1.png
[ad13faeeb37f4fbf8d42a3ed291ee508.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2989c4b064054351834b0b46526b53cb.png