margin和padding的區別以及什麼時候使用

首先需要明白，盒子模型主要定義四個區域：內容（content）、邊框與內容的區域，稱為內邊距（padding）、邊框（border）、邊框與外部的區域，稱為外邊距（margin）。

區別margin：表示邊框以外的區域

padding：表示邊框與內容之間的區域

使用場景

使用margin的場景：

需要在border（邊框）以外的區域新增空白間距時；

空白區域不需要使用背景顏色時

注意：上下兩個相連的盒子之間使用的外邊距需要相互抵消。

需要使用負值對頁面布局時（注意：margin的值可以取負數，padding的值是不能使負數的）

margin需注意：

margin在垂直方向上相鄰的值相同時會發生疊加，水平方向的值會相加。margin取負值時，在垂直方向上，兩個元素的邊界仍然會重疊，但是，此時乙個為正數，乙個為負數，並不是取其中較大的值，而是用邊界的絕對值，也就是正的邊界值和負的邊界值相加。

使用padding的場景：

需要在border內側新增空白

空白區域需要使用到背景顏色

注意：上下相連的兩個盒子之間的空白，間距是兩者之和

最後，需注意margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間距；margin用於布局分開元素，使元素與元素互不干擾；padding用於元素與內容之間間隔，讓內容與元素之間有一段距離。

最後的最後，在怪異盒模型中，乙個塊的總寬度受marign影響，但不受padding的影響。