深入學習CSS中Margin和Padding屬性用法

作者：admin 2010-08-19 12:55:55

本文和大家重點討論一下CSS的Margin和Padding屬性的用法，margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。

CSS中的Margin和Padding屬性有很多值得學習的地方，這里和大家分享一下Margin和Padding屬性的用法，margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。

詳細學習CSS的Margin和Padding屬性

margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。

　　例子h2：

h2{  
font-size:1.5em;  
background-color:#ccc;  
margin:1em;  
padding:3em;  
}

　　元素四邊可以設置的屬性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left

CSS盒模型BoxModel

　　width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當box為float時，IE6中box左右的margin會加倍

W3C定義的盒模式如下：

　　width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。

　　但是由于瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。

左右Margin加倍的問題

　　當box為float時，IE6中box左右的margin會加倍。比如：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<title>www.webjx.com</title> 
<style> 
.outer{  
width:500px;  
height:200px;  
background:#000;  
}  
.inner{  
float:left;  
width:200px;  
height:100px;  
margin:5px;  
background:#fff;  
}  
</style> 
</head> 
<body> 
<divclassdivclass="outer"> 
<divclassdivclass="inner"></div> 
<divclassdivclass="inner"></div> 
</div> 
</body> 
</html>

　　左面的inner的左面margin明顯大于5px。
　　這時候，定義inner的display屬性為inline。

【編輯推薦】

CSS中padding和margin屬性用法說明
實例解析CSS中padding、margin兩個重要屬性用法
CSS padding屬性定義邊內補白方法探究
IE6下使用CSS定義DIV高度行之有效的辦法
技術前沿一段JS代碼輕松解決IE6-IE8的兼容性問題

責任編輯：佚名來源： bitscn.com