CSS中margin，也许你未见过它的另一面。

大家好，这里是笑颜の行方。
也可以把の去掉，叫笑颜行方也行。

咳咳…稍微自我介绍，接下来进入正题。
在CSS中，有个叫盒模型的玩意。
盒模型是由 内容+内边距+边框+外边距 形成的。
（鄙人习惯用中文称呼。请别太在意。）

本篇想描述的，是盒模型中处于最外层的外边距，也就是margin。
假设在一个页面定义一个div（= =日常操作）
定义这个div的外边距有以下方法。

div{
      margin: 20px;/* 只写一个参数，div四周外边距都是20像素 */

      margin-top: 20px;/* 单独定义div顶部外边距为20像素 */
      margin-right: 20px;/* 单独定义div右部外边距为20像素 */
      margin-bottom: 20px;/* 单独定义div左部外边距为20像素 */
      margin-left: 20px;/* 单独定义div底部外边距为20像素 */

      margin: 20px 20px;
      /* 第一个参数定义上下外边距为20像素
          第二个参数定义左右外边距为20像素 */
      margin: 20px 20px 20px;
      /* 第一个参数定义顶部
          第二个参数定义左右
          第三个参数定义底部 */
      margin: 20px 20px 20px 20px;/* 四个参数分别对应 上、右、下、左 */
    }

四个参数怎么会对应 上、右、下、左 呢？
三个字，顺时针。

好了，关于外边距的数值设定，先描述到这里。

接下来要介绍的，是你没见过，它所拥有的另一面。
呈上代码。

	*{
      margin: 0;padding: 0;
    }
    .a1{
      width: 150px;
      height: 150px;
      background-color: #f00;
      margin: 20px;
    }
    .a2{
      width: 150px;
      height: 150px;
      background-color: #0f0;
      margin: 20px;
    }
    .a3{
      width: 40px;
      height: 40px;
      background-color: #00f;
      position: absolute;
      top: 170px;
      left: 190px;
    }

简要说明这段代码。
粗暴重置样式，红蓝块设置四周边距为20像素。
蓝色块设置宽高40像素，绝对定位至红块底部右边。

本以为上下会有40像素的距离（即蓝块的高度）
一看却只有大约蓝块一半的高度。
没错，元素外边距是会上下重叠的，以两方较大的边距为基准。

如果将外边距设为负值呢？

	.a2{
      margin: -20px;
    }

嗯？我没有设置定位啊。
外边距设置成负值原来会产生这种效果。

来解读一下当前的状况吧。
绿块留在页面中的宽度为130像素，高度仍然是150像素。
红块四周设置了20像素的外边距。
绿块的负值抵消了红块所拥有的底部外边距，与红块接触。

绿块左移有点像定位的效果。
绿块没有边距时，因为有重置了样式，会贴在页面的边框上面。
左边距为负值，则绿块会向左移动。

想不到吧？
从此之后，外边距有了更多的用法，请好好使用吧！