1、平面圖

2、立體圖

3、margin 外邊距

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

關(guān)于外邊界距離的設(shè)定，規(guī)則如下：

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

4、padding 內(nèi)邊距（補(bǔ)白）

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

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

5、margin 和 padding 的使用區(qū)別

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

（1）何時應(yīng)當(dāng)使用 margin

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

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

（2）何時應(yīng)當(dāng)時用 padding

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

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

個人認(rèn)為：

margin 是用來隔開元素與元素的間距；padding 是用來隔開元素與內(nèi)容的間隔。

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

?

（SAW：Game Over！）

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。