在之前文章中已经介绍过了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不会撑大盒子。
新手小白,欢迎交流学习,如有错误欢迎指正!!!