1、平面圖

2、立體圖

3、margin 外邊距

元素周圍生成額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的區域。

關于外邊界距離的設定，規則如下：

/*四周相同*/ margin: 20px;/*10px上下 20px左右 */ margin: 10px 20px;/*10px上 15px左右 30px下*/ margin: 10px 15px 30px;/*上右下左*/ margin: 10px 15px 20px 25px;/*設置自動居中則可以使用*/ margin：0 auto；

4、padding 內邊距（補白）

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

padding 的用法 大體上來說，與 margin 略有不同，但是在距離設定上一致，此處不再敘述。

5、margin 和 padding 的使用區別

margin 和 padding 在許多地方往往效果都是一模一樣，而且你也不能說這個一定得用 margin 那個一定要用 padding，因為實際的效果都一樣，你說 margin 用起來好他說 padding 用起來會更好，但往往爭論無果。根據網上的總結歸納大致發現這幾條還是比較靠譜的：

（1）何時應當使用 margin

需要在 border 外側添加空白時。空白處不需要背景（色）時。上下相連的 兩個盒子之間的空白，需要相 互抵消時。

如 15px + 20px 的 margin，將得到 20px 的空白。

（2）何時應當時用 padding

需要在 border 內測添加空白時。空白處需要背景（色）時。上下相連的兩個盒子之間的空白，希望等于兩者之和時。

如 15px + 20px 的 padding，將得到 35px 的空白。

個人認為：

margin 是用來隔開元素與元素的間距；padding 是用來隔開元素與內容的間隔。

margin 用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。

?

（SAW：Game Over！）

總結

以上是生活随笔為你收集整理的margin 和 padding 的使用区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。