深入學(xué)習(xí)CSS中Margin和Padding屬性用法
CSS中的Margin和Padding屬性有很多值得學(xué)習(xí)的地方，這里和大家分享一下Margin和Padding屬性的用法，margin和padding用來(lái)隔開(kāi)元素，margin是隔開(kāi)元素與外邊，padding是隔開(kāi)元素里邊。
詳細(xì)學(xué)習(xí)CSS的Margin和Padding屬性
margin和padding用來(lái)隔開(kāi)元素，margin是隔開(kāi)元素與外邊，padding是隔開(kāi)元素里邊。
例子h2：
- h2{
- font-size:1.5em;
- background-color:#ccc;
- margin:1em;
- padding:3em;
- }
元素四邊可以設(shè)置的屬性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left
CSS盒模型BoxModel
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會(huì)填充padding和content部分。但是由于瀏覽器設(shè)計(jì)上的問(wèn)題，不同瀏覽器顯示效果會(huì)有些不同。左右Margin加倍的問(wèn)題當(dāng)box為float時(shí)，IE6中box左右的margin會(huì)加倍
W3C定義的盒模式如下：
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會(huì)填充padding和content部分。
但是由于瀏覽器設(shè)計(jì)上的問(wèn)題，不同瀏覽器顯示效果會(huì)有些不同。
左右Margin加倍的問(wèn)題
當(dāng)box為float時(shí)，IE6中box左右的margin會(huì)加倍。比如：
- <!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。
這時(shí)候，定義inner的display屬性為inline。
【編輯推薦】
