今天寫前端代碼發現了maigin屬性與padding屬性，有些遺忘，故查找資料整理一下，特此分享。
一.margin
<div style="margin:20px 0;"> </div>
看見一個div使用了樣式margin，但是這裏的20px 和 0 ，不清楚到底是上下左右哪個外邊距，有時會有4個，有時有2個，有時3個，有時4個，容易搞不清，下面例子詳細解說：
1.定義和用法
margin表示外邊距
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
2.說明
這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。
註釋：允許使用負值。
例子 1
4個：分別爲上右下左順時針
margin:10px 5px 15px 20px;
- 上外邊距是 10px
- 右外邊距是 5px
- 下外邊距是 15px
- 左外邊距是 20px
例子 2
3個：分別爲上，左右一致，下
margin:10px 5px 15px;
- 上外邊距是 10px
- 右外邊距和左外邊距是 5px
- 下外邊距是 15px
例子 3
2個：第一個爲上下一致，第二個左右一致
margin:10px 5px;
-
上外邊距和下外邊距是 10px
-
右外邊距和左外邊距是 5px
例子 4
1個：四個都是一樣的
margin:10px;
- 所有 4 個外邊距都是 10px
3.實例
設置p元素的4個外邊距
<html>
<head>
<style type="text/css">
p.margin {
margin: 2cm 4cm 3cm 4cm
}
</style>
</head>
<body>
<p>這個段落沒有指定外邊距。</p>
<p class="margin">這個段落帶有指定的外邊距。上外邊距爲2cm，右外邊距4cm，下外邊距3cm，左外邊距爲4cm。</p>
<p style="margin:50px">這個段落有直接寫在元素裏的maigin，上下左右都是50px。</p>
</body>
</html>
3.margin可能的值
| 值 | 描述 |
|---|---|
| auto | 瀏覽器計算外邊距。基於瀏覽器的自動適應 |
| length | 規定以具體單位計的外邊距值，比如像素、釐米等。默認值是 0px。 |
| % | 規定基於父元素的寬度的百分比的外邊距。 |
| inherit | 規定應該從父元素繼承外邊距。 |
二. padding
padding稱呼爲內邊距，其判斷的依據即邊框離內容正文的距離，而我喜歡CSS權威指南解釋的“補白”（或者叫“留白”），因爲他很形象。補白(padding)：補白位於元素框的邊界與內容區之間。很自然，用於影響這個區域的屬性是padding。
padding的簡寫等同與maigin。
實例：
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
這個表格單元的每個邊擁有相等的內邊距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個表格單元的上和下內邊距是 0.5cm，左和右內邊距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>