一、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，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。
垂直外边距合并问题
别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3Shool CSS外边距合并了解这个基本知识。
实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>垂直外边距合并</title>
- <style>
- .top{width:160px; height:50px; background:#ccf;}
- .middle{width:160px; background:#cfc;}
- .middle .firstChild{margin-top:20px;}
- </style>
- </head>
- <body>
- <div class="top"></div>
- <div class="middle">
- <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>
- <div class="secondChild"></div>
- </div>
- </body>
- </html>
如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
一般说来这个问题解释到这里，大多数文章就不会再深入下去了，但作为一名实战开发者，最求的是知其然知其所以然，原本使用margin-top就是为了与父元素隔开距离，而按照你这么一个解法，其实是一种“修复”，为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要border-top加个上边框，这么一加反而画蛇添足，为以后修改留下隐患。
为什么一定要用border-top,padding-top去为了这么一个所谓的标准规范而多写这么一行代码呢？答案你可以参考另外一篇文章用Margin还是用Padding里找到答案。
用Margin还是用Padding
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
二、margin 的基本写法
外边距的 margin-width 的值类型有：auto | length | percentage
percentage：百分比是由被应用 box 的containing block（注：一个元素的 containing block 是该元素产生的 box(es)在计算位置和大小时参考的一个矩形）的大小所决定。对于 margin-top 和 margin-bottom 也同样成立。
margin 的默认值为 0，并且 margin 支持负值。
上面我们曾提到属性 margin 可以用来同时指定 box 的四边外边距。如果属性 margin 有四个值，那么值将按照上-右-下-左的顺序作用于四边，即从元素的上边开始，按照顺时针的顺序围绕元素。表达式如下：
- margin：top rightright bottombottom left；
四个数值中间以空格分隔。效果等同于：