CSS学习12：内边距（padding）

什么是内边距？

内边距就是，盒子模型内的内容到边框的距离。

 

---

 

语法：

合写属性：

值的个数	表达意思
padding:5px;	1个值，代表上右下左都有5个像素的内边距
padding:5px 10px;	2个值，代表上下内边距5个像素，左右内边距像素是10个像素
padding:5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding:5px 10px 20px 30px;	4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距是30像素

分写属性：

属性	作用
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

---

 

内边距会影响盒子的实际大小

1、盒子设置了宽高

给盒子设置内边距，盒子会在边框到内容之间有内边距，从而撑开盒子的大小

解决方法：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

2、盒子没有设置宽高

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。