note：margin的top和bottom屬性對非替換內聯元素無效，例如和。
一、margin塌陷（collapsing）
定義：塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為乙個外邊距，如果都為負，取最小值；如果都為正，取最大值；如果一正一負，取和。
注意 浮動元素 和 絕對定位 元素的外邊距不會摺疊（因為這裡觸發了 塊格式化上下文 bfc）。外邊距摺疊也只會發生在屬於同一bfc的塊級元素之間。
導致margin塌陷的三種情況：
1、相鄰元素之間
毗鄰的兩個元素之間的外邊距會摺疊（除非後乙個元素需要清除之前的浮動）。
2、父元素與其第乙個或最後乙個子元素之間
如果在父元素與其第乙個子元素之間 不存在邊框、內邊距、行內內容，也沒有建立塊格式化上下文、或者清除浮動 將兩者的 margin-top 分開 ； 或者在父元素與其最後乙個子元素之間不存在邊框、內邊距、行內內容、height、min-height、max-height 將兩者的 margin-bottom 分開，那麼這兩對外邊距之間會產生摺疊。此時子元素的外邊距會「溢位」到父元素的外面。即使某一外邊距為0，這些規則仍然適用。因此就算父元素的外邊距是0，第乙個或最後乙個子元素的外邊距仍然會「溢位」到父元素的外面。
3、空的塊級元素
如果乙個塊級元素中不包含任何內容，並且在其 margin-top 與 margin-bottom 之間沒有邊框、內邊距、行內內容、height、min-height 將兩者分開，則該元素的上下外邊距會摺疊。
二、margin的百分比取值是以誰為參照的？
w3c規範顯示：
note that in a horizontal flow, percentages on 『margin-top』 and 『margin-bottom』 are relative to the width of the containing block, not the height (and in vertical flow, 『margin-left』 and 『margin-right』 are relative to the height, not the width).也就是在水平流中（正常橫向狀態）margin和padding都是參照父容器的寬度note that percentages on 『padding-top』 and 『padding-bottom』 are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).
三、margin居中定位：
auto屬性值：瀏覽器會自動選擇乙個合適的margin來應用。它可以用於將乙個塊居中。
在現代瀏覽器中，如果要把一些東西水平居中，使用 display:flex; justify-content: center; .而, 在一些老的瀏覽器，如ie8-9, 這些是不可用的. 想要把乙個元素在其父元素中居中, 使用 margin: 0 auto;
margin之百分比
我們以乙個問題開始 假設乙個塊級包含容器，寬1000px，高600px，塊級子元素定義 margin 10 5 大家說說 margin 的 top,right,bottom,left 計算值最終是多少？我記得得到不少 100px 30px 100px 30px 的反饋，我們來還原 css demo ...
css學習筆記 解決margin塌陷問題
content 此時margin top 50px並沒有達到想要的效果，實際效果確實他會帶著他的父級元素一起向下50畫素，該現象就是margin塌陷引起的 解決辦法 1 給父元素設定border top會解決此問題 不建議使用，設定border會影響父元素的高度 2 通過bfc block form...
margin之百分比（二）
在 margin系列之keyword auto 中，說過了margin值為auto的情況，這次要聊的是值為百分比的情形。我必須承認這是乙個非常基礎的知識點，但有一段時間我發現很多人對此有錯誤的認知。偶爾在面試或者分享的時候，我會問到這個問題，有人會脫口而出的告訴我他對此的感性理解。或許現在大多數人對...