margin的意思很容易明白,就是外邊距,用更通俗的話說,就是二個盒子之間間距的設置。it
margin有許多須要注意的地方,好比塊級元素垂直相鄰外邊距會合並,行內元素實際上不佔上下外邊距,左右外邊距也不會合並,浮動元素的外邊距也不會合並。基礎
普通元素的margin百分百是按照父級元素(正確的說應該是包含塊,具體能夠看這篇文章關於CSS中設置overflow屬性的值爲hidden的相關理解)的寬來計算的,而絕對定位的元素的margin百分比是按照第一個定位元素(relative,absolute和fixed)的寬來計算的。float
block元素(不考慮float和absolute)在垂直方向發生margin重疊(不考慮writing-mode改變書寫方式);margin三種重疊:1.相鄰兄弟元素;2.父親元素和第一個或最後一個孩子元素;3.空的block元素。方法
重疊計算方法:正正取最大、負負取最小和正負相加。margin
在書寫方向的垂直方向,margin:auto會自動分配剩餘空間(剩餘空間的意思簡單的能夠理解爲:在沒有設置寬以前的長度去掉你設置的寬餘下的那段距離)。top
絕對定位元素的非定位方向margin無效(貌似是的,不過描述不許確,其實一直有效,只不過如今只能夠影響本身,沒法改變兄弟了,所以看起來失效了)。di
最後一個題外話,margin-collapse能夠設置重疊方式(collapse默認,重疊、discard取消margin,等於margin:0和separate分隔,就是不發生重疊)。co