CSS中margin與padding的區別

 

CSS邊距屬性定義元素周圍的空間。經過使用單獨的屬性，能夠對上、右、下、左的外邊距進行設置。也可使用簡寫的外邊距屬性同時改變全部的外邊距。——W3School

邊界(margin)：元素周圍生成額外的空白區。「空白區」一般是指其餘元素不能出現且父元素背景可見的區域。——CSS權威指南

padding稱呼爲內邊距，其判斷的依據即邊框離內容正文的距離，而我喜歡CSS權威指南解釋的「補白」（或者叫「留白」），由於他很形象。補白(padding)：補白位於元素框的邊界與內容區之間。很天然，用於影響這個區域的屬性是padding。——CSS權威指南

使用簡寫的外邊距屬性同時改變全部的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針「上右下左」記憶。

而且規範還提供了省略的數值寫法，基本以下：

一、若是margin只有一個值，表示上右下左的margin同爲這個值。例如：margin:10px; 就等於 margin:10px 10px 10px 10px;

二、若是 margin 只有兩個值，第一個值表示上下margin值，第二個值爲左右margin的值。例如：margin:10px 20px; 就等於 margin:10px 20px 10px 20px;

三、若是margin有三個值，第一個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;

四、若是margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;

在實際應用中，我的不推薦使用三個值的margin，一是容易記錯，二是不容易往後修改，一開始若是寫成margin:10px 20px 30px;往後需求改動爲上10px，右30px，下30px，左20px，你不得不仍是得把這個margin拆開爲margin:10px 30px 30px 20px;費力且不討好，不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在，不要爲了如今節省倆個字節而讓往後再次開發的成本上升。

一樣的，padding也有上述類似的方法對上、右、下、左內邊距進行設置。

這裏補充一個知識點：外邊距合併

含義：外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

關於何時用margin何時用padding，衆說紛紜。並且margin和padding在許多地方每每效果都是如出一轍，並且你也不能說這個必定得用margin那個必定要用padding，由於實際的效果都同樣，你說margin用起來好他說padding用起來會更好，但每每爭論無果。根據網上的總結概括大體發現這幾條仍是比較靠譜的：

什麼時候應當使用margin：

須要在border外側添加空白時。

空白處不須要背景（色）時。

上下相連的兩個盒子之間的空白，須要相互抵消時。如15px + 20px的margin，將獲得20px的空白。

什麼時候應當時用padding：

須要在border內測添加空白時。

空白處須要背景（色）時。

上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px + 20px的padding，將獲得35px的空白。

我的認爲：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。