margin和padding用法區別

這篇博文應該算是用Margin仍是用Padding的讀書筆記。

首先，有時候二者在佈局定位上可以實現一樣的效果。
可是，仍是有若干的區別。

做者主要講的內容是：

• 由於margin存在垂直外邊距合併的用法，而這個用法很是的靈活，因此，若是不熟悉的話，用padding更容易讓新手上手。

這裏舉的例子是有關兩個相鄰的div，其中第二個div沒有使用border屬性,並且這個div的第一個子元素使用了margin-top方法，出現的結果是：沒有和父元素邊框擠出空白，卻使得這個margin-top做用在了父div身上。這就是在父div未加border屬性時 margin的垂直外邊距出現的問題。

• 對於維護性而言，對父元素加padding好過於在父元素未加padding的狀況下給子元素(尤爲是第一子元素)加padding。由於對第一個子元素的css padding的操做是在子選擇器中完成的，若是後期變動第一個子元素(如換類，)，而這個類裏面沒有加padding,那麼就沒法實現以前的效果，這時候就須要從新編碼一遍。用父元素這個就好多了,易於維護。

總而言之，這個做者的觀點是：感受他仍是更傾向於用padding

什麼時候應當使用margin：
須要在border外側添加空白時。 空白處不須要背景（色）時。
上下相連的兩個盒子之間的空白，須要相互抵消時。如15px + 20px的margin，將獲得20px的空白。

什麼時候應當時用padding：
須要在border內測添加空白時。 空白處須要背景（色）時。 上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px + 20px的padding，將獲得35px的空白。

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

剩下的時間再讀讀他寫的相關的第二篇與margin相關的文檔吧：
附上連接：
不要告訴我你懂margin