突然想起这个问题，这是很基础很基础的问题啊，但之前很多次都忘记了，然后困扰了我很久。不清不楚的感觉很不好，所以要做成笔记比较好记住，好记性不如烂笔头，以后再次困惑了再回来看看。推荐文章，海玉的《我知道你不知道的负Margin》。
其中提到了margin的“参考线”这一概念及解释了负margin元素参考谁移动：
参考线就是 margin移动的基准点，此基准点相对于box(自身)是静止的。而margin的数值，就是box相对于参考线的位移量。
在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。
外元素就是元素的紧邻元素。
以元素本身为参考，确切含义是指以自身为参考来影响周围元素的位置（实质即为影响下边和右边相邻元素的参考线）。
当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
就是说，元素的margin-bottom为负值，该元素相邻的下方的元素会向上移动来靠近该元素。如果元素的margin-right为负值，与该元素相邻的又方的元素会向左移动靠近该元素。 尝试：
<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{margin:100px;padding:0;}
.up{border:3px solid blue;width:200px;height: 200px;margin-bottom:-20px;text-align: center;}
.down{border:3px solid green;width:200px;height: 200px;text-align:center;}
</style>
</head>
<body>
<div class="up">我是上面的框框,我设置了负的margin-bottom</div>
<div class="down">我是下面的框框</div>
</body>
</html>
