1.Margin

???用來設置頁面中一個元素所占空間的邊緣到相鄰元素之間的距離.

?? 如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
?? 如果只提供一個，將用于全部的四邊。
?? 如果提供兩個，第一個用于上－下，第二個用于左－右。
?? 如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。

?? 在IE4+，margin屬性不可用于td和tr對象。

?? 用法:body { margin: 36pt 24pt 36pt; }

2.Padding

???用來設置元素內容到元素邊界的距離。

?? 如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
?? 如果只提供一個，將用于全部的四條邊。
?? 如果提供兩個，第一個用于上－下，第二個用于左－右。
?? 如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
?? 內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。
?? 不允許負值。

?? 用法:body { padding: 36pt 24pt 36pt; }

?

在下面這個例子中，我們將了解如何為文檔本身（即body元素）定義外邊距。下圖顯示了我們對外邊距的要求。

滿足上述要求的CSS代碼如下：

body {margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;}

或者你也可以采用一種較優雅的縮寫形式：

body {margin: 100px 40px 10px 70px;}

幾乎所有元素都可以采用跟上面一樣的方法來設置外邊距。例如，我們可以為所有用<p>標記的文本段落定義外邊距：

body {margin: 100px 40px 10px 70px;}p {margin: 5px 50px 5px 50px;}

為元素設置內邊距

內邊距（padding）也可以被理解成“填充物”。這樣理解是合理的，因為內邊距并不影響元素間的距離，它只定義元素的內容與元素邊框之間的距離。

下面我們通過一個簡單的例子來說明內邊距的用法。在這個例子中，所有標題都具有背景色：

h1 {background: yellow;}h2 {background: orange;}

通過為標題設置內邊距，你可以控制在標題文本周圍填充多少空白：

h1 {background: yellow;padding: 20px 20px 20px 80px;}h2 {background: orange;padding-left:120px;}

轉載于:https://www.cnblogs.com/nanyangzp/p/4827366.html

總結

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

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