在CSS中，BOX的Padding属性的数值赋予顺序为

在CSS中，BOX的Padding属性的数值赋予顺序为

4种可能的情况，举例说明：
padding:10px; 四个内边距都是10px
padding:5px 10px; 　 上下5px　左右10px
padding:5px 10px 15px; 上5px　右10px　下15px 左因为缺省与右相等，则为10px
padding:5px 10px 15px 20px; 上5px　右10px　下15px 　左20px2011-11-28

padding属性的书写格式总共有以下几种：
padding:10px; 意思是上下左右值全是10px
padding:5px 10px; 意思是上下为5px，左右为10px;
padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px
padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px
（注意：padding后面4个值定义的顺序分别为：上 右 下 左）
而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。

扩展资料：注意：padding后面4个值定义的顺序分别为：上 右 下 左
而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。
box-sizing的CSS属性是用来改变默认的CSS框模型，用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。
说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的。
在开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。
2018-12-08

Vue实践-CSS样式position/display/float属性对比使用

2020-12-18

padding:5px;就是上下左右都为5；
padding:0px,5px;就是上下为0，左右为5；
padding:10px 5px 15px;就是上位10，左右为5，下为15；
padding:0px,5px,10px,15px;就是上为0，右为5，下为10，左为15，
padding的顺序是顺时针方向的2011-11-29

四个为： 上 右 下 左 3个数值为 上 左右 下2011-11-28

顶 右 底 左2011-12-09