CSS-区块属性，宽、高、内边距、外边距样式属性的使用详解

深藏阁楼爱情的钟 2023-08-17 17:48 60阅读 0赞

## CSS 区块属性 ##

#### width、height ####

设置元素宽高

*  `width` 设置元素的宽度
 *  `height` 设置元素的高度
    
    单位可以是 px 、%（相对于父级元素的宽高的百分比）、auto

#### padding ####

设置元素内填充，元素的边沿到内容之间的距离；该样式属性是一个综合属性，可以统一设置也可以单独设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

*  `padding` 该样式属性有 1 到 4 个值；不同个数的值有着不同的作用；属性值可以是像素（px）也可以是百分比（%），使用百分比时是相对于父元素的宽进行计算
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">属性值的个数</th> 
       <th align="left">作用</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">1个值 <code>padding: x;</code></td> 
       <td align="left">上下左右内边距（四周）</td> 
      </tr> 
      <tr> 
       <td align="left">2个值 <code>padding: x x;</code></td> 
       <td align="left">第一个值为上下内边距，第二个值为左右内边距</td> 
      </tr> 
      <tr> 
       <td align="left">3个值 <code>padding: x x x;</code></td> 
       <td align="left">上内边距，左右内边距，下内边距</td> 
      </tr> 
      <tr> 
       <td align="left">4个值 <code>padding: x x x x;</code></td> 
       <td align="left">上内边距，右内边距，下内边距，左内边距</td> 
      </tr> 
     </tbody> 
    </table>

#### 单独设置某个方向的 padding ####

*  `padding-left:` 左内填充距离，左边线到内容间的距离
 *  `padding-right:` 右内填充距离，右边线到内容间的距离
 *  `padding-top:` 上内填充距离，上边线到内容间的距离
 *  `padding-bottom:` 下内填充距离，下边线到内容间的距离

#### margin ####

设置元素的外边距；就是用来设置元素边沿外的空白区域的范围

*  `margin` 该样式属性与 paddin 类似也有 1 到 4 个值；用法与 padding 相同

#### margin 也可以单独设置某个方向 ####

*  `margin-left` 元素左边线往外的距离
 *  `margin-right` 元素右边线往外的距离
 *  `margin-top` 元素上边线往外的距离
 *  `margin-bottom` 元素下边线往外的距离

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230808/046dc38e1ead4a5f8d1a590b5bef1c64.png