padding四个值的顺序？padding
大家好，感谢邀请，今天来为大家分享一下padding四个值的顺序的问题，以及和padding的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
在CSS中,BOX的Padding属性的数值赋予顺序为
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“两个值。
CSS中padding的用法
语法：
padding: length
参数：
length:由浮点数字和单位标识符组成的长度值|或者百分数。百分数是基于父对象的宽度。请参阅长度单位
说明：
检索或设置对象四边的补丁边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
不允许负值。
对应的脚本特性为padding。请参阅我编写的其他书目。
关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。
示例：
body{ padding: 36pt 24pt 36pt;}
body{ padding: 11.5%;}
body{ padding: 10% 10% 10% 10%;}
CSS中margin和padding的区别
在CSS中margin和padding两者都是表示边距的，而margin是指控件边缘相对于父空间的边距；padding是指控件的内容相对于控件的边缘的边距。
简单来说两者的区别大概就是：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离；padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。两者区别的图片示意图如下：
设置margin和padding属性的方法：
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。元素四边可以设置的属性：
margin-top、margin-right、margin-bottom、margin-left；
padding-top、 padding-right、 padding-bottom、 padding-left。
Margin和Padding属性中四个值的先后顺序：
顺序为：上右下左：'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的.
如：
padding:1px 1px 1px 1px；
margin:1px 1px 1px 1px；就是按照这个顺序。
好了，关于padding四个值的顺序和padding的问题到这里结束啦，希望可以解决您的问题哈！