margin
设置元素的外边距。
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
- margin: 5px; 使用一个值，这个值就会应用于全部四个边。
- margin: 5px 9px; 使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
- margin: 5px 9px 11px; 使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。
- margin: 5px 9px 11px 10px; 使用四个值，它们会按照顺时针（从上开始），依次应用于上、右、下、左四个边。
PS：margin也存在单独的属性设置各边边距。 margin-top (上外边距)，margin-right (右外边距)，margin-bottom (下外边距)，margin-left (左外边距)
提示：如果元素位于另一个元素的上面，对于相互接触的两个 margin（即元素相互接触的下外边距和上外边距） ，仅使用其中较大的一个，另一个外边距会被叠加。左右外边距不叠加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { background-color: burlywood; }
p.ex1 { background: yellow; }
p.ex2 { margin: 10px; background: yellow; }
</style>
</head>
<body>
<p class="ex1">使用默认外边距，默认为：auto</p>
<p class="ex2">各边都添加 10px 的外边距</p>
</body>
</html> 
padding
设置元素内边距。
同margin一样，简写属性设置相同，也存在单独设置的属性。 padding-top (上内边距)，padding-right (右内边距)，padding-bottom (下内边距)，padding-left (左内边距)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { background-color: burlywood; }
p.ex1 { background: yellow; }
p.ex2 { padding: 10px; background: yellow; }
</style>
</head>
<body>
<p class="ex1">使用默认内边距，默认为：auto</p>
<p class="ex2">各边都添加 10px 的内边距</p>
</body>
</html> 
理解内边距和外边距的 em 值：
当 em 值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。设想一个简单的例子，其中的段落定义了 p { font-size: 14px; padding: .5em; }。那么，它在四个边的内边距都是 7 像素，因为 7/14 = 0.5。如果将字体大小改为 20px，内边距就会自动变成 10 像素（10/20 = 0.5）。这就是 em 这样的相对单位的作用：随着布局放大或缩小，布局的比例始终不变。
这里需要指出一条简短的说明：如果要对内边距和外边距使用百分数，通常不会将它们用于上下边距的值，因为这样的值是基于其包含块的宽度的。