css中邊界和補白:css中邊界和補白

邊界和補白
HTMLDog指南 > CSS初級指南 >
邊界和補白
邊界margin和補白padding（依據國內出版社的翻譯慣例，margin被翻譯成邊界，padding被翻譯成補白，譯者依照習慣翻譯。但譯者認為，margin翻譯成外邊距，padding翻譯成內邊距更為直白和形象。你可以依據自己的習慣來適應這兩種不同的譯法。——譯者注）是隔開元素最常用的兩個屬性。邊界是元素外邊的距離，而補白則是元素內部的距離。
為h2改進代碼如下：
h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; }
你可以看到二級標題外圍有一個字元的寬度，還很臃腫，因為在二級標題內部有3個字元寬度的補白。
元素的四邊可以設定不同的值。margin-top、 margin-right、margin-bottom、
margin-left、padding-top、padding-right、padding-bottom和padding-left是無需解釋的屬性（看看英文字面意思啦）。
盒狀模型
邊界、補白和邊框（見下一頁）是人盡皆知的盒狀模型的組成所有部分。盒狀模型是這樣工作的：中間是元素盒子（在腦海中想像一下情形），從裡到外依次包圍著補白盒子、邊框盒子和邊界盒子。很顯然地，如下所示：
Margin box（邊界盒）
Border box（邊框盒）
Padding box（補白盒）
Element box（元素盒）
沒有必要全部使用上述三個外圍的“盒子”，但如果你能記住盒狀模型，你可以把它們應用到頁面的每一個元素。
本文連結http://www.cxybl.com/html/wyzz/CSS/20121212/34928.html