CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧!
1、带竖线分隔的横向列表(例如：网站底部栏目)
传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。
所以我们采用border-left 左边框来模拟分割线，然后通过margin-left：-1px隐藏掉第一个列表项的边框，父元素设置 overflow：hidden 来隐藏溢出部分，这样完美达到首尾无分割线的要求。
实际测试中发现 iphone safari 设置margin负值=border-widht 并不能很好的隐藏，
还有约0.5px的细线，iPad没测不知道如何?修复方法如下：
/* 修复iphone safari 不能完全隐藏边框的bug */
@media screen and (max-device-width: 480px){
.nav-list-item { margin-left:-2px; }
.ui-tab-trigger-item { margin-bottom:-2px; }
}
2、带底部分割线的竖向列表(例如：新闻列表)
原理同横向列表相同，需要注意的是 margin 负值在 IE 中的层级bug，详细参见：
IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常，得到的最终解决方案是用 zoom：1确保触发hasLayout，然后设置position:relative。
3、两栏、三栏自适应布局
曾经有这样一个经典的需求：
1)两栏抑或三栏布局，主体自适应宽度;
2)一个或两个侧边栏固定宽度;
3)主体部分xhtml结构在最前面(网速慢时可以优先显示，对SEO有利)
4)自适应高度，且不影响等高;
5)兼容IE6+，firefox，chrome，opera。
于是乎margin负值便大放光彩，首先是国外出现的圣杯布局，掀起一股margin负值热潮。
紧接着在栅格化布局大行其道的淘宝，玉伯大湿进一步利用margin负值，创造了同一种xhtml结构，两栏或三栏位置通过css任意调整的布局，玉伯美其名曰：双飞翼布
局--比翼双飞，像鸟儿翱翔蓝天一样自由。(双飞翼布局完整demo) 至此，margin负值在布局之路上配合float妹子，已经发挥得淋漓尽致。
优雅的demo
4、多栏等高
正如上面所说，有时候我们还希望多栏等高，使页面看起来更美。于是便有了经典的padding-bottom：9999px;margin-bottom：-9999px;
先通过padding把盒子扩展到足够高，然后通过margin伪娘把它给拉回来，最后父元素设置overflow：hidden隐藏溢出，这样多栏布局中就会以最高栏为其他栏的视觉高度。
当然万物没有完美的，这种等高方法的弊端如下：
1)当高度超过9999px时候失效，当然一般高度不会超过这个，也可以设置为最大值32767px(为啥，因为int的最大值就是32767，超过这个数值会以最大值计算)
2)无法设置底部边框
其他的就不多说了，以后会专门写一篇多栏等高的文章，详细介绍各种方法的利弊，大家按需使用。
margin负值 – 一个秘密武器,布布扣,bubuko.com