margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素裡邊。
例子h2：
h2 元素四邊可以設定的屬性：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
css盒模型 box model
width和height定義的是content部分的寬度和高度，padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。左右margin加倍的問題當box為float時，ie6中box左右的margin會加倍
w3c定義的盒模式如下：
width和height定義的是content部分的寬度和高度，padding border margin的寬度依次加在外面。背景會填充padding和content部分。
但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。
左右margin加倍的問題
當box為float時，ie6中box左右的margin會加倍。比如：
左面的inner的左面margin明顯大於5px。
這時候，定義inner的display屬性為inline。
外層box自動計算高度的問題
根據w3c定義，沒有float屬性的外層box不會自動計算高度，要計算高度，必須在內層最後乙個box加入clear:both。
opera、netscape、mozilla等不會計算外層box高度，但是微軟ie6會自動計算外層高度。比如：
上面的**在ie中有黑色的背景，但是沒有正確的計算上下的margin，在inner2下面加上乙個包含clear:both屬性的div後，可以正確計算margin。但是firefox中仍然沒有黑色背景，通常的解決辦法是定義一下clear:both這個div的高度，或者插入全形空格，這樣就必須增加額外的高度。網上一種比較好的解決辦法是在外層div中加入overflow屬性，同時使用clear:both，這樣就不會增加額外的高度了。如下：
因此，外層css要定義overflow屬性，內層最後要加上clear屬性。
居中問題
需要定義元素的寬，並且定義橫向的margin，如果你的布局包含在乙個層(容器)中，就象這樣：
你可以這樣定義使它橫向居中：
#wrap
但是ie5/win不能正確顯示這個定義，我們採用乙個非常有用的技巧來解決：在外層用text-align屬性。就象這樣：
#outer
#wrap
第乙個#outer的text-align:center; 規則定義ie5/win中#outer的所有元素居中(其他瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。
因此，在有居中元素的css中，外層css要定義text-align:center屬性，內層居中用margin:x auto x auto定義，並重新定義text-align。
#html
IE 盒模型和W3C盒模型
在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...
W3C盒模型與IE盒模型
ss盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。w3c模型中 ...
盒模型 IE盒模型和W3C盒模型
w3c盒模型 可以看到得到的盒子寬度和高度是120 20 20 5 5 10 10 190px ie盒模型 可以看到得到的盒子寬度和高度是120 10 10 140px 其中的120 70 20 20 5 5。也就是設定的div寬度包括了內容內邊距和邊框的寬度。通過這兩對盒子進行對比可以清楚看到兩種...