CSS| 框模型-margin

CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，能夠是像素、英寸、毫米或 em。

margin 能夠設置爲 auto。更常見的作法是爲外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子爲 h1 元素的四個邊分別定義了不一樣的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍着元素順時針旋轉的：

margin: top right bottom left

另外，還能夠爲 margin 設置一個百分比數值：

p {margin : 10%;}

百分數是相對於父元素的 width 計算的。上面這個例子爲 p 元素設置的外邊距是其父元素的 width 的 10%。

margin 的默認值是 0，因此若是沒有爲 margin 聲明一個值，就不會出現外邊距。可是，在實際中，瀏覽器對許多元素已經提供了預約的樣式，外邊距也不例外。例如，

在支持 CSS 的瀏覽器中，外邊距會在每一個段落元素的上面和下面生成「空行」。所以，若是沒有爲 p 元素聲明外邊距，瀏覽器可能會本身應用一個外邊距。固然，只要你特別做了聲明，就會覆蓋默認樣式。

 

 

 

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併

外邊距合併（疊加）是一個至關簡單的概念。可是，在實踐中對網頁進行佈局時，它會形成許多混淆。

簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

 

親自試一試

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

 

親自試一試

儘管看上去有些奇怪，可是外邊距甚至能夠與自身發生合併。

假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併：

若是這個外邊距遇到另外一個元素的外邊距，它還會發生合併：

這就是一系列的段落元素佔用空間很是小的緣由，由於它們的全部外邊距都合併到一塊兒，造成了一個小的外邊距。

外邊距合併初看上去可能有點奇怪，可是實際上，它是有意義的。以由幾個段落組成的典型文本頁面爲例。第一個段落上面的空間等於段落的上外邊距。若是沒有外邊距合併，後續全部段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。若是發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一塊兒，這樣各處的距離就一致了。

註釋：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。