瀏覽器兼容性

一旦為頁面設置了恰當?shù)?DTD，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設置的，而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

術語翻譯

• element : 元素。
• padding : 內(nèi)邊距，也有資料將其翻譯為填充。
• border : 邊框。
• margin : 外邊距，也有資料將其翻譯為空白或空白邊。

在 w3school，我們把 padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距。邊框內(nèi)的空白是內(nèi)邊距，邊框外的空白是外邊距，很容易記吧：）

外邊距合并

外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網(wǎng)頁進行布局是，它會造成許多混淆。

簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：

當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。