css padding简写

css padding简写

一、padding简写一般如下：

padding:1px2px3px4px;

等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

顺序：top|right|bottom|left

不论是边框宽度，还是边框颜色、边距等，只要CSS样式涉及四边，顺序通通都是“上右下左”（顺时针方向）。

二、padding简写的其它几种方式

◆如果四边的值省略一个，只写三个：

padding:1px2px3px;

则等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;（省略的“左”值等于“右”）

◆如果四边的值省略两个：

padding:1px2px;

则等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;（省略的“下”值等于“上”）

◆如果只有一个值：

padding:1px;

则等效于：

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;

三、css padding简写实例

   padding-top:1px;  
　　padding-right:1px;  
　　padding-bottom:1px;  
　　padding-left:1px;  
　　代码简化为：padding:1px  

　　padding-top:1px;  
　　padding-right:2px;  
　　padding-bottom:1px;  
　　padding-left:2px;  
　　代码简化为：padding:1px 2px  

　　padding-top:1px;  
　　padding-right:2px;  
　　padding-bottom:3px;  
　　padding-left:2px;  
　　代码简化为：padding:1px 2px 3px  

　　padding-top:1px;  
　　padding-right:2px;  
　　padding-bottom:3px;  
　　padding-left:4px;  
　　代码简化为：padding:1px 2px 3px 4px