關於前端的margin

margin

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

 

我比較喜歡使用「外邊距」這個詞來解釋margin（同理padding能夠稱之爲「內邊距」，可是我又偏偏喜歡稱呼padding爲「補白」或者「留白」），咱們能夠很清楚的瞭解到margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

 

margin設置負數

注意點
A、負margin是絕對標準的CSS
    這不是開玩笑。W3C甚至標註過：對於margin屬性來講，負值是被容許的。這是Nuff說的，查看這篇文章會
有更多詳細內容。
B、負maring不是一種hack方法
    千真萬確，不能由於缺少對負marign的理解，或者由於它長得像hack，就認爲它是一種hack方法。
除非你是用來修復本身在其餘地方形成的錯誤。
C、不脫離文檔流
    不使用float的話，負margin元素是不會破壞頁面的文檔流。因此若是你使用負margin上移一個元素，
全部跟隨的元素都會被上移。
D、徹底兼容
    全部現代瀏覽器都徹底支持負margin（IE6在大多數狀況下也支持）。
E、浮動會影響負margin的使用
    負margin不是你天天都用的CSS屬性，應用時應當心謹慎。
F、Dreamweaver不解析負margin
    DW的設計視圖不會解析負margin。但問題是你爲何要在設計視圖中檢查你的網站呢？

基本寫法（簡寫）

上右 下左
省略的數值寫法，基本以下：

1、若是margin只有一個值，表示上右下左的margin同爲這個值。
　　例如：margin:10px; 就等於 margin:10px 10px 10px 10px;

2、若是 margin 只有兩個值，第一個值表示上下margin值，第二個值爲左右margin的值。
　　例如：margin:10px 20px; 就等於 margin:10px 20px 10px 20px;

3、若是margin有三個值，第一個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。
　　例如：margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;

4、若是margin有四個值，那這四個值分別對應上右下左這四個margin值。
　　例如：margin:10px 20px 30px 40px;

外邊距合併

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

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

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

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

 

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

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

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

用Margin仍是用Padding

什麼時候應當使用margin：
須要在border外側添加空白時。
空白處不須要背景（色）時。
上下相連的兩個盒子之間的空白，須要相互抵消時。如15px + 20px的margin，將獲得20px的空白。

什麼時候應當時用padding：
須要在border內測添加空白時。
空白處須要背景（色）時。
上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px + 20px的padding，將獲得35px的空白。

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。

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

HTML（這裏說的是html標準，而不是xhtml）裏分兩種基本元素，即block和inline。顧名思義，block元素就是以」塊」表現的元素（block-like elements），inline元素便是以」行」表現的元素（character level elements and text strings）。兩者表現的主要差異在於，在頁面文檔中block元素另起一行開始，並獨佔一行。inline元素則同其餘inline元素共處一行。

block元素（塊元素）大體有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨着html5標準的推動，一些元素將被廢除，而一些新的元素將被引入)注意的是並不是全部的block元素的默認display屬性都是block，像table這種display:table的元素也是block元素。

inline元素（內聯元素）大體有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱爲可置換元素（Replaced element）。他們區別通常inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們能夠設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。

或許有朋友對非置換元素（non-replaced element）有點疑惑，稍微幫助你們理解一下。非置換元素，W3C 中沒有給出明確的定義，但咱們從字面能夠理解到，非置換元素對應着置換元素（replaced element），也就是說咱們搞懂了置換元素的含義，就懂了非置換元素。

置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認就有 CSS 格式化外表範圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素之外的元素。

margin在塊級元素下，他的性能能夠徹底體現，上下左右任你設定。且記住塊級元素的margin的參照基準是前一個元素即相對於自身以前的元素有margin距離。若是元素是第一個元素，則就是相對於父元素的margin距離（但第一個元素相對於父元素margin-top而父元素又沒有設定padding-top/border-top的話要須要印證上面的垂直外邊距合併的知識）

margin也能用於內聯元素，這是規範所容許的，可是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，而且因爲邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。

這是由於邊界應用於內聯元素時不改變元素的行高度，若是你要改變內聯元素的行高即相似文本的行間距，那麼你只能使用這三個屬性：line-height，fong-size，vertical-align。請記住，這個影響內聯元素高度的是line-height而不是height，由於內聯元素是一行行的，定一個height的話，那這究竟是整段inline元素的高呢？仍是inline元素一行的高呢？這都說不許，因此統一都給每行定一個高，只能是line-height了。

margin-top/margin-bottom對內聯元素沒有多大實際效果，不過margin-left/margin-right仍是可以對內聯元素產生影響的。應用margin:10px 20px 30px 40px;，左邊這個css若是寫在inline元素上，他的效果大體是，上下無效果，左邊離他相鄰元素或者文本距離爲40px，右邊離他相鄰元素或者文本距離爲20px。

最後在內聯元素中還有上文咱們提到的非可置換inline元素（non-replaced element），這些個元素img|input|select|textarea|button|label雖然是內聯元素，但margin依舊能夠影響到他的上下左右！

總結下來margin 屬性能夠應用於幾乎全部的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，並且垂直外邊距對非置換內聯元素（non-replaced inline element）不起做用。

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

林林總總寫了那麼多，最後總結一些瀏覽器中常見的margin Bug吧，之後遇到margin下的佈局問題能夠查看這裏找到解決的方案，若是你還發現其餘關於瀏覽器下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 Hack _margin-left:-3px;從而消除3px間距。
原理分析：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。