margin詳解垂直外邊距合并

Margin 的特性  

margin 始終是透明的。  

margin 通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設定。即：margin-top、margin-right、margin-bottom、margin-left。

也可以使用簡寫的外邊距屬性同時改變所有的外邊距：margin: top right bottom left;(eg:margin:px px px px) 記憶方式是元素周圍正上方順時針“上右下左”記憶。

并且規範還提供了省略的數值寫法，基本如下：
、 如果 margin 隻有一個值， 表示上右下左的 margin 同為這個值。 例如： margin:px; 就等于 margin:px px px px;

、如果 margin 隻有兩個值，第一個值表示上下 margin 值，第二個值為左右 margin的值。例如：margin:px px; 就等于 margin:px px px px;

、如果 margin 有三個值，第一個值表示上 margin 值，第二個值表示左右 margin 的值，第三個值表示下 margin 的值。例如：margin:px px px; 就等于 margin:px px px px;

、如果 margin 有四個值，那這四個值分别對應上右下左這四個 margin 值。例如：
margin:px px px px;Margin 垂直外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，它們将形成一個外邊距。合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

垂直外邊距合并問題常見于第一個子元素的 margin-top 會頂開父元素與父元素相鄰元
素的間距，而且隻在标準浏覽器下 (FirfFox、Chrome、Opera、Sarfi)産生問題，IE 下反而表現良好。例子可以檢視下面代碼(IE 下表現“正常”，标準浏覽器下檢視出現“bug”)：

示例：
.top{width:px; height:px; background:#ccf;}
.middle{width:px; background:#cfc;}
.middle .firstChild{margin-top:px;}
<div class="top"></div>
    <div class="middle"><div class="firstChild">我其實隻是想和我的父元素隔開點距離。</div>
    <div class="secondChild"></div>
</div>

如果按照 CSS 規範，IE 的“良好表現”其實是一個錯誤的表現，因為 IE 的 asLayout 渲染導緻了這個“表現良好”的外觀。而其他标準浏覽器則會表現出“有問題”的外觀。好了，如果你讀過了上面 W3Shcool 的 CSS 外邊距合并的文章後，就很容易讨論這個問題了。這個問題發生的原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其内部文檔流中的第一個子元素的上邊距重疊。
再說了白點就是：父元素的第一個子元素的上邊距 margin-top 如果碰不到有效的 border或者 padding.就會不斷一層一層的找自己 “上司”(父元素，祖先元素)的麻煩。隻要給上司設定個有效的 border 或者 padding 就可以有效的管制這個目無上司的 margin 防止它越級，假傳聖旨，把自己的 margin 當上司的 margin 執行。
對于垂直外邊距合并的解決方案上面已經解釋了，為父元素例子中的 middle 元素增加一個border-top 或者 padding-top 即可解決這個問題。

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），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。

置換元素，W3C 中給出了定義：
“An element that is outside the scope of the CSS formatter, such as an image, embeddeddocument, or applet”從定義中我們可以了解到，置換元素（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:px px px px;，左邊這個 css 如果寫在 inline 元素上，他的效果大緻是，上下無效果，左邊離他相鄰元素或者文本距離為 px，右邊離他相鄰元素或者文本距離為 px。你可以自行嘗試一番。最後在内聯元素中還有上文我們提到的非可置換 inline 元素（non-replaced element），這些個元素img|input|select|textarea|button|label 雖然是内聯元素，但 margin 依舊可以影響到他的上下左右！

總結下來 margin 屬性可以應用于幾乎所有的元素，除了表格顯示類型（不包括table-caption, table and inline-table）的元素，而且垂直外邊距對非置換内聯元素（non-replacedinline element）不起作用。