.box1, .box2
.box2
/*html***/
"box1">
"box2">
複製**
**同上，box1,box2增加浮動屬性
.box1, .box2
.box1
.box2
/*html***/
"box1">
"box2">
複製**
box2的margin-left增加到100px
.box1
.box2
/*html***/
"box1">
"box1">tdtnzdbfthdt
"box1">tdtnzdbfthdt
"box2">
複製**
可以看到，行內元素的上下外邊距不起作用，但左右外邊距起作用，且不會合併。
margin寬度可以用百分比值，是基於父元素的寬度進行計算
#box1
#box2
/*html***/
"box1">
"box2">
複製**
因為兩個盒子的垂直外邊距完全接觸會觸發外邊距的合併，所以解決方法就是把兩個外邊距隔開
1.9.1. 給父元素新增border
1.9.2. 給父元素新增overflow: hidden;(推薦)
1.9.3. 給父元素新增內邊距
.box1,.box2
.box1
.box2
/*html***/
"box1">
"box2">
複製**
紅色背景會充滿寬為10px的內邊距，垂直相鄰內邊距不會合併
藍色方框為設定的box1範圍，但背景會延伸至內邊距邊界。
2.2.1 對於行內元素，有乙個很特別的地方
兩個相鄰的行內元素，按道理應該在一行緊緊相鄰，但是...
產生的原因是兩個span標籤之間的換行符，解決辦法在此不展開
2.2.2.
.box2
.box1
/*html***/
"box1">
"box2">gnfjyfajgirnnicfxndj
"box2">gnfjyfyskxndj
複製**
可以看到行內元素的上下內邊距時不佔文件空間的，兩個塊級元素之間的距離是行高，但左右邊距還是佔文件空間的。
.box1,.box2
.box2
/*html***/
"box1">
"box2">
複製**
可以看到，是在絕對定位基礎上，再增加內邊距
設定padding寬度用百分比時，是基於父元素的寬度進行計算，所以只有塊級元素適用
margin padding樣式屬性
margin left 10px margin right 10px margin top 10px margin bottom 10px 用於在乙個宣告中設定所有外邊距的寬度，或者設定各邊上外邊距的寬度。該屬性有多個值 值描述 auto 瀏覽器計算外邊距。length 規定以具體單位計的外邊距值，...
盒模型及margin padding
background顏色會渲染padding區域 padding top 25px padding left 25px padding bottom 25px padding right 25px 上述 簡寫方法 4個值 順時針 上 右 下 左 padding 10px 20px 30px 40px...
相容的網頁寬度margin padding
hack相容 moz firefox 4 webkit safari 和 chrome o opera ie6承認 和 和 不承認 important ie7識別 和 不識別 識別 imortant 而firfox兩個都不識別，識別 important selector 當然。還有專門針對ie7的寫...