邊界margin和補(bǔ)白padding（依據(jù)國(guó)內(nèi)出版社的翻譯慣例，margin被翻譯成邊界，padding被翻譯成補(bǔ)白，譯者依照習(xí)慣翻譯。但譯者認(rèn)為，margin翻譯成外邊距，padding翻譯成內(nèi)邊距更為直白和形象。你可以依據(jù)自己的習(xí)慣來適應(yīng)這兩種不同的譯法。——譯者注）是隔開元素最常用的兩個(gè)屬性。邊界是元素外邊的距離，而補(bǔ)白則是元素內(nèi)部的距離。
為h2改進(jìn)代碼如下：
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
你可以看到二級(jí)標(biāo)題外圍有一個(gè)字符的寬度，還很臃腫，因?yàn)樵诙?jí)標(biāo)題內(nèi)部有3個(gè)字符寬度的補(bǔ)白。
元素的四邊可以設(shè)置不同的值。margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding-right、padding-bottom和padding-left是無需解釋的屬性（看看英文字面意思啦）。
盒狀模型
邊界、補(bǔ)白和邊框（見下一頁）是人盡皆知的盒狀模型的組成所有部分。盒狀模型是這樣工作的：中間是元素盒子（在腦海中想像一下情形），從里到外依次包圍著補(bǔ)白盒子、邊框盒子和邊界盒子。很顯然地，如下所示：
Margin box（邊界盒）
Border box（邊框盒）
Padding box（補(bǔ)白盒）
Element box（元素盒）
posted on 2006-05-31 11:20
jackstudio 閱讀(2292)
評(píng)論(1) 編輯 收藏 所屬分類:
common