CSS设置元素内边距（padding）、外边距（margin）

港控/mmm° 2024-03-29 16:02 82阅读 0赞

## 设置元素内边距padding ##

所有的 HTML 元素基本都是以矩形为基础。  
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：  
padding（内边距）：它围绕着内容的空间。  
margin（外边距）：它围绕元素外部的空间。  
border（边框）：它紧接着内边距的线。  
padding控制着元素内容与border之间的空隙大小。  
![在这里插入图片描述][0573d66ebd4a4bbfac99f9dbc771078b.png]  
我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。  
红色盒子比蓝色盒子有着更多的padding填充空间。  
当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。

## 设置元素外边距margin ##

margin（外边距）属性控制元素的边框与其他元素之间的距离。  
**注意：**  
①红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。  
②当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。  
![在这里插入图片描述][9b731d7e4af24f3bb414965c897d324a.png]

## 设置元素负外边距 ##

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。  
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。  
注意：如果你设置元素margin为负值，元素会变得更大。  
![在这里插入图片描述][d3b66dcc111840bc8e3da8d2c137e68a.png]

## 使用padding给元素添加不同的外边距 ##

CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值  
不需要每次都要分别声明 padding-top，padding-right，padding-bottom和padding-left属性，也可以把它们汇总在padding属性里面声明，如下：  
注意：四值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。  
![在这里插入图片描述][4a76b85ec64b499c98078fd142ae7ae3.png]

## 使用margin给元素添加不同的外边距 ##

CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。  
同样，每个方向的外边距值可以在margin属性里面汇总声明，  
来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式：  
![在这里插入图片描述][a43f092320e1459bb954107abba50a93.png]  
![在这里插入图片描述][86c48188f3684bc6bac3a1e9575f9085.png]  
**特殊：** margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值，第一个值代表元素的上、下方向（本例设置为 0）；第二个值代表左、右两边（本例中的auto是特殊值，含义是水平方向左右对称）。

[0573d66ebd4a4bbfac99f9dbc771078b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/37ec6337057a497babfe9ae21faaab6c.png
[9b731d7e4af24f3bb414965c897d324a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/3b2eacc5a24d4f3394cd5e29a4b31a8c.png
[d3b66dcc111840bc8e3da8d2c137e68a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/0f2a9cabbd714fa091a4e1d401273679.png
[4a76b85ec64b499c98078fd142ae7ae3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/c326dbe3c67842bfbb5481380d844c0f.png
[a43f092320e1459bb954107abba50a93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/b97b93b7a3a8421a9e8ef0983c1c1049.png
[86c48188f3684bc6bac3a1e9575f9085.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/95b724db25b2409eb6e2fc0a955acb2b.png