margin相關基本知識

什麼是 margin ?

CSS 邊距屬性定義元素周圍的空間。經過使用單獨的屬性，能夠對上、右、下、左的外邊距進行設置。也可使用簡寫的外邊距屬性同時改變全部的外邊距。——W3School

邊界，元素周圍生成額外的空白區。「空白區」一般是指其餘元素不能出現且父元素背景可見的區域。——CSS權威指南

概述

margin屬性爲給定元素設置全部四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距容許爲負數。

語法

margin : [ <length> | <percentage> | auto ]{1,4}
    

取值

margin 可取1~4個值,值類型以下

length

指定一個固定的寬度。能夠爲負數

percentage

百分比相對於該元素的包含塊的寬度（相對於該塊的百分比）。該值能夠爲負數。

auto

瀏覽器會自動選擇一個合適的margin來應用。它能夠用於將一個塊居中。

• 只有一個 值時，這個值會被指定給所有的 四個邊.
• 兩個 值時，第一個值被匹配給 上和下, 第二個值被匹配給 左和右.
• 三個 值時，第一個值被匹配給 上, 第二個值被匹配給 左和右, 第三個值被匹配給 下.
• 四個 值時，會依次按 上、右、下、左 的順序匹配 (即順時針順序).

特性

margin始終是透明的(父元素設置背景, margin區域可見的)

參考線

在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。top和left是之外元素爲參考，right和bottom是以元素自己爲參考。margin的位移方向是指margin數值爲正值時候的情形，若是是負值則位移方向相反。

總結：

1: margin-top和 margin-left 值得偏移相對於相鄰元素margin或border; 若是沒有相鄰元素則包含容器的content邊爲及基準

2: margin-bottom和 margin-right 相對於自身進行偏移

常見的問題

垂直外邊距合併

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

合併幾種狀況 W3Shool CSS外邊距合併

• 相鄰元素間的合併
• 包含元素間的合併(假設沒有內邊距或邊框把外邊距分隔開)
• 元素自身的合併(空元素，它有外邊距，可是沒有邊框或填充padding)

margin在塊元素、內聯元素中的區別

margin 在塊級元素下, 他的特性能夠徹底體現, 上下左右任你設定。

margin也能用於內聯元素,這是規範所容許的 margin的top和bottom屬性對非替換內聯元素無效, 例如<span>和<code>。

常見的瀏覽器下margin出現的bug

IE6中雙邊距Bug：

發生場合：當給父元素內第一個浮動元素設置margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。

解決方法：是給浮動元素加上display:inline;CSS屬性；或者用padding-left代替margin-left。

原理分析：塊級對象默認的display屬性值是block，當設置了浮動的同時，還設置了它的外邊距就會出現這種狀況。也許你會問：「爲何以後的對象和第一個對象之間就不存在雙倍邊距的Bug」？由於浮動都有其相對應的對象，只有相對於其父對象的浮動對象纔會出現這樣的問題。第一個對象是相對父對象的，而以後對象是相對第一個對象的，因此以後對象在設置後不會出現問題。爲何display:inline能夠解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。而後，float:left等浮動屬性可讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性同樣，支持高寬，垂直margin和padding等，因此div class的全部樣式能夠用在這個display inline的元素上。

IE6中浮動元素3px間隔Bug：

發生場合：發生在一個元素浮動，而後一個不浮動的元素天然上浮與之靠近會出現的3px的bug。

解決方法：右邊元素也一塊兒浮動。

原理分析：IE6瀏覽器缺陷Bug。

IE6/7負margin隱藏Bug：

發生場合：當給一個有hasLayout的父元素內的非hasLayout元素設置負margin時，超出父元素部分不可見。

解決方法：去掉父元素的hasLayout；或者賦hasLayout給子元素,並添加position:relative;

原理分析：IE6/7獨有的hasLayout產生問題。

IE6/7下ul/ol標記消失bug：

發生場合：當ul/ol觸發了haslayout而且是在ul/ol上寫margin-left，前面默認的ul/ol標記會消失。

解決方法：給li設置margin-left，而不是給ul/ol設置margin-left。

原理分析：IE6/7瀏覽器Bug

IE6/7下margin與absolute元素重疊bug：

發生場合：雙欄自適應佈局中，左側元素absolute絕對定位，右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。

解決方法：把左側塊級元素更改成內聯元素，好比把div更換爲span。

原理分析：這是因爲IE6/IE7瀏覽器將inline水平標籤元素和block水平的標籤元素沒有加以區分一視同仁渲染了。屬於IE6/7瀏覽器渲染Bug。

IE6/7/8下auto margin居中bug：

發生場合：給block元素設置margin auto沒法居中

解決方法：出現這種bug的緣由一般是沒有Doctype，而後觸發了ie的quirks mode，加上Doctype聲明就能夠了。在《戰勝IE的葵花寶典》裏給出的方法是給block元素添加一個width可以解決，但根據本人親測，加with此種方法是無效的，若是沒有Doctype即便給元素添加width也沒法讓block元素居中。

原理分析：缺乏Doctype聲明。

IE8下input[button | submit] 設置margin:auto沒法居中

發生場合：ie8下，若是給像button這樣的標籤（如button input[type="button"] input[type="submit"]）設置{ display: block; margin:0 auto; }若是不設置寬度的話沒法居中。

解決方法：能夠給爲input加上寬度

原理分析：IE8瀏覽器Bug。

IE8百分比padding垂直margin bug：

發生場合：當父元素設置了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設置了margin同樣。

解決方法：給父元素加一個overflow:hidden/auto。

原理分析：IE8瀏覽器Bug。

參考

海玉 W3C