这篇文章是从原博客转载过来的，是2013年写的，有些不对的地方请指出。
博客地址 , 欢迎订阅
这是一篇我自己关于负margin的理解，今天因为做项目用到了负margin，几经找资料，终于搞懂了，就赶紧记下来，免得忘记了！
margin为正时，top、left属性是以content上（左）或垂直上方相连元素margin的下（右）边为参考线垂直向下（右）位移。
margin为负时，right、bottom属性是元素本身的border右（下）边为参考线水平向右（下）位移。
总结
盒子最后的显示大小等于盒子的
border+padding+正margin，而负margin不会影响其大小。-
margin为负且盒子static时：
若属性为top、left，盒子将被拉进指定的方向;
若属性为bottom、right,将后续的元素拖拉进来，覆盖本来的元素。
若width没有被设置，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样
选项卡demo
怎么样实现上面菜单栏的选中状态下没有下边框的效果？
一般的思路是每个菜单栏设置边框，选中的状态没有下边框
其实还可以这样，边框不是上面菜单栏的，而是下面内容块的：
明白了把，所以只要给菜单栏设置margin-bottom:-1px就可以让下面的内容块上移1px，刚好让菜单栏的背景色盖住那个1px的边框。
如果选中状态没有背景色，就悲剧了：
请看 demo
现在看这个例子没有明显展示出负margin的能力，再看下面的
负margin加宽元素
再看一个width没有设置，通过负margin加宽的元素的布局例子，这是很常见的例子，如果不用负margin，就会很麻烦呢
demo
圣杯布局
因为BFC有这个特性：
元素在设定
width时，添加border、padding、margin会导致元素变宽；但是在没有设定width时，元素会自动填满父元素，添加padding、border、margin会使元素变窄，减少量等于他们三个之和。
负margin实现两列等高布局
参考文章
以上是网上资料总结，我的总结就一句话：left、top不论正负自己动，right、bottom不论正负别的元素动！正的向外，负的向内！考虑问题的时候还要考虑到盒子的特性问题！！
PS:遇到问题只要先想想什么是margin，margin的作用是什么，则负margin的工作原理则迎刃而解！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。