CSS盒子模型之内边距——padding

在之前文章中已经介绍过了CSS盒子模型中的边框（border)，今天来介绍盒子中的内边距——padding

http://【CSS盒子模型之边框——border - CSDN App】http://t.csdnimg.cn/HXPzB

---

padding属性属于设置内边距，即边框与内容之间的距离。

padding-left、padding-right、padding-top、padding-bottom分别指的是左、右、上、下内边距。在写代码时可以简写，简写如下

padding : 5px ;  （表示上下左右都为5像素的内边距）

padding : 5px 10px ;  （表示上下5像素内边距。左右10像素内边距）

padding : 5px 10px 20px ;  （表示上5像素内边距，左右10像素内边距，，下20像素内边距）

padding : 5px 10px 20px 30px;  （表示上5像素，右10像素，下20像素，左30像素，顺时针）

---

当我们再给盒子指定padding值之后，会发生两件事情：

1：内容和边框有了距离，添加了内边距。

2：padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

那么我们应该怎么解决这个问题呢？

如果保证盒子效果达到我们想要的大小的话，就让width/height减去多出来的内边距大小即可。但是如果盒子本身没有指定width/height属性，则padding不会撑大盒子。

---

新手小白，欢迎交流学习，如有错误欢迎指正！！！