相信大家在输出的过程中，一定会用到margin这个元素，除非你是不做输出的，当然，在不必要的情况下，我个人不太喜欢用，因为margin在ie6下有双边距的bug，一般情况下都是用到padding。但，不喜欢用，不等于不会用，在必要的情况下，我们还是要和margin的交道的。

既然要用到margin这个元素，当然我们要去了解它。什么叫margin？有什么特性？margin在实际工作中的用处是什么？padding和margin空间什么时候应用？一般margin在浏览下有什么bug？这些都需要深入去学习。

一、margin到底是何方神圣？

CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

上述解释有点通俗，简单来说，margin就是“外边距”的意思，相反，padding就是“内边距”，之样方便大家理解。

二、margin的特性

margin是透明的。

margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有：auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法，基本如下：

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

很多人写代码的时候，为了节约代码，会简写成这样：margin:10px 20px 30px（实际为margin:10px 20px 30px 20px）。不修改是好，但天下那有这么好的事，如果需要改动为上10px，右30px，下30px，左20px，那还是要折开margin:10px 30px 30px 20px。所以，个人喜欢刚开始的时候写完整，见人见智吧。