今天写前端代码发现了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>