css margin外邊距屬性與用法總結

圍繞在元素邊框的空白地區是外邊距。設定外邊距會在元素外建立額外的“空白”。設定外邊距的最簡單的方法就是使用 margin 屬性，margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em、百分數值甚至負值。下面本文就來具體的談談外邊距 margin 屬性和使用，外邊距的重疊和疊加，以及 margin 為負值的作用等內容。

一、CSS的margin屬性介紹

1.詳解CSS的margin屬性使用

margin 的預設值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支援 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面產生“空行”。因此，如果沒有為 p 元素宣告外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋預設樣式。

2. 詳解css的外邊距margin的使用

檢索或設定對象四邊的外延邊距。如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。如果只提供一個，將用於全部的四邊。如果提供兩個，第一個用於上、下，第二個用於左、右。如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。非替代(non-Replaced)行內元素可以使用該屬性設定左、右兩邊的外補丁；若要設定上、下兩邊的外補丁，必須先使該對象表現為塊級或內聯塊級。外延邊距始終透明。

3. CSS重要屬性之 margin 屬性知識大合集介紹

1）margin 屬性的簡單介紹

2）margin 無法適用的元素

3）外邊距摺疊 (Collapsing margins)

4）Collapsing margins 解決方案

二、margin 外邊距重疊或者疊加問題

1. CSS中margin邊界疊加問題的解決方案介紹（圖文）

邊界疊加是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。簡單地說，當兩個垂直邊界相遇時，它們將形成一個邊界。這個邊界的高度等於兩個發生疊加的邊界的高度中的較大者。

2. CSS外邊距(margin)重疊及防止方法

　邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成一個單一邊界。

　兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。注意：相鄰的盒子可能並非是由父子關係或同胞關係的元素產生。

三、margin 為負值的作用

1. 簡單談談margin負值的作用

我們在CSS中都會使用margin，但將margin設定成負數，那可能就不大好處理了，margin負值並非hack，margin負值遵循文檔流；假如使用margin負值促使一個元素向上位移，那麼相關元素也會隨之發生位移；margin負值能良好相容各瀏覽器。

2. CSS中使用負margin值來調整置中位置

這或許是最常用的置中方法。如果知道了各個元素的大小，設定等於寬高一半大小的負margin值（如果沒有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會使塊元素置中。

有關CSSmargin的相關問答

1. 前端 - margin的問題，那個老哥幫我解釋下

2. 前端 - CSS 三列等高布局的疑問 margin負補償

3. css - margin 負值為什麼要這樣設計?

【相關推薦】

1. CSS置中：最全面的CSS置中方法大全

2. DIV置中：最全的p置中方法總結

3. css圖片置中：css圖片上下左右置中（水平和垂直置中）