一、簡介

margin我們一般習慣的叫它外邊距，分別可以設置四個方向的外邊距，這里不再贅述賦值語法。

實際上，我們通常設置的margin是物理級別的設置，而margin還有start、end、before、after等，這些主要是邏輯級別的設置，如果你感興趣的話，自行Google吧。

在設置margin時，我們必須要知道：

二、盒子模型

說到margin，不得不說一下盒子模型：

1、從內之外content => padding => border => margin
 

盒子模型之所以要終點理解，主要是盒子模型的標準不一樣，也就決定我們在CSS中設置的width到底是什么，這時大家多會想起那幾個計算公式，實際上CSS3的到來，我們可以通過box-sizing來設置盒子模型的標準:

2、border-box: width從border開始計算；
 

3、content-box: width從content開始計算；
 

4、padding-box: 已經從標準中去除。

再來一張圖，是不是已經了然于胸了
 

三、margin重疊問題

這種問題主要發生在block元素上并且不是浮動元素（這里并沒有描述清楚，在后面會詳細講），下面我們來看發生的情況。

1、發生在相鄰的兄弟元素

相鄰的兄弟元素發生的margin重疊
 

這種情況發生margin重疊，相鄰兄弟節點之間的距離為最大margin值，避免這種情況的最佳方式，在垂直方向上，只設置margin-top或者margin-bottom。

2、發生在父子節點

父子節點發生margin重疊
 

這里按照我們的理解應該是a距離b是20像素，c距離a是100像素。但是事實卻不是這樣，這里我們可以通過以下方法解決重疊的問題：

四、神奇的margin負值