CSS中Padding與Margin的區別

Margin指的是元素邊框與相鄰元素之間的距離，而Padding指的是元素邊框到元素內容之間的距離。

Margin常用於控制元素與其他元素的距離，例如布局中的邊距或間距。Padding常用於控制元素內容與元素邊框之間的距離，可以用於控制元素內容的顯示。

Margin和Padding都可以取正數、負數、百分比、em、rem等單位。

當一個元素同時存在Margin和Padding屬性時，CSS會按照以下順序優先使用：

1. 相鄰元素之間的margin不能重疊；

/* margin-top為相鄰元素間距離，而不是與上方元素的間距 */
div{
    margin: 20px 0;
}

2. 對於相鄰的兩個方向的margin取最大值；

/* 相鄰左右兩邊的margin取右邊的值為準 */
div{
    margin: 0 20px 0 30px;
}

3. 相同方向的margin取最大值；

/* margin-top為30，margin-bottom為50，取50為最大值 */
div{
    margin: 30px 0 50px 0;
}

4. 若一個方向有正數和負數的margin值，則縱向兩者相加，橫向兩者取最大值。

/* margin-top: 20px, margin-bottom: -30px, 上下相消，margin: 10px */
div{
    margin: 20px 0 -30px 0;
}

1. Margin和Padding都會影響元素的計算寬高；

2. 在box-sizing屬性為content-box時，元素計算寬高不包括padding和border，但包括margin；在box-sizing屬性為border-box時，元素計算寬高包括padding、border和content，但不包括margin。

/* include padding and border, exclude margin */
div{
    box-sizing: border-box;
}

3. 相鄰元素的margin屬性會合併，產生重疊現象，稱為margin collapse。當相鄰兩個元素的margin都是正數時，合併後的距離為兩者間距離的最大值，當一正一負或兩個都是負數時，合併後的距離為兩者間距離的疊加值。

/* 兩個塊級元素間距離是40px */
div{
    margin: 20px;
}

4. 當設置了元素的overflow屬性為auto、scroll或hidden時，padding會影響元素滾動條的位置。

/* 水平滾動條移到padding以外的區域 */
div{
    overflow-x: auto;
    padding: 20px;
}

以一個簡單的布局為例：

頭部

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237034.html