margin和padding屬性中四個值的先后順序及區別


參考來源 http://www.codesky.net/article/201008/139783.html感謝分享

 

margin和padding中四個值的先后順序及區別

順序為:上右下左

'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照順時針方向羅列的.

舉例:

  1. padding:1px2px3px4px;  
  2. margin:5px6px7px8px;  

分別表示什么位置呢?

1px2px3px4px的位置順序是上右下左

一二三四位分別表示頂部右邊底部左邊,不過很多情況下你也可以精減一下:

重點簡略寫法:

比如頂部底部屬都是1px左右邊都為2px時你完全可以寫成padding:1px2px;

比如頂部為1px左右邊為2px底部為3px時你可以寫成padding:1px2px3px;

Margin屬性:

例如: 

  1. H1{margin-top:2em}  
  2. H2{margin-right:12.3%}  

Margin還有一個快捷的書寫方法,就是直接用margin屬性,例如:
 

  1. BODY{margin:1em2em3em2em}  

等同於: 

  1. BODY{  
  2. margin-top:1em;  
  3. margin-right:2em;  
  4. margin-bottom:3em;  
  5. margin-left:2em;  
  6. }  
  7.  

margin屬性后面可以有四個值,中間用空格隔開(記住不是逗號),順序是“上右下左”,當然margin后面可以不足四個值,例如: 

  1. BODY{margin:2em}/*所有的margin都設為2em*/  
  2. BODY{margin:1em2em}/*上下margin為1em,右左margin為2em*/  
  3. BODY{margin:1em2em3em}/*上margin為1em,右左margin為2em,  
  4. 下margin為3em*/  

Padding屬性:

屬性名稱:'padding-top'、'padding-right'、'padding-bottom'、'padding-left'、'padding'

例如: 

  1. BLOCKQUOTE{padding-top:0.3em}  

padding屬性和margin類似,此處略去。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM