border、margin、padding三者的區別

標籤：不清楚   alt   too   www   分享圖片   ima   htm      ref   

當你寫前端的時候，肯定會遇到border,margin和padding這幾個單詞。

如：
padding: 16px 0;
margin: 0 10px;

在CSS中，他們是表示距離的東西，很多人剛開始搞不清楚他們的區別，我也是。在網上找到一個很好的說明他們之間的區別的，border、margin、padding三者的區別。

• 邊框屬性(border)用來設定一個元素的邊線。
• 邊距屬性(margin)是用來設定一個元素所佔空間的邊緣到相鄰元素之間的距離。
• 間隙屬性(padding)是用來設定元素內容到元素邊界的距離。
• 這三個屬性都屬於CSS中box類型的屬性

看圖，更容易理解：

一張盒模型的3D，這個我現在暫時還理解不了：

另外補充說明，margin、padding的參數值可以有四、三、二或者一個分別作用於四邊，如padding: 16px 0; ：

四個：將按上右下左的順序作用於四邊
三個：第一個用於上，第二個用於左右，第三個用於下
兩個：第一個用於上下，第二個用於左右
一個：將用於全部的四邊

註：border具體用法

參考連結：

-- 《CSS 2.0中文手冊》

border、margin、padding三者的區別