您的位置:首页 > Web前端 > css > 正文

css padding简写

更多 时间:2014-1-5 类别:css 浏览量:5204

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  
    
    			
  • 本文地址:http://www.studyofnet.com/news/275.html

    您可能感兴趣