相信关于margin负值的使用，每个人都有自己的一套方法。在这里，整理了一下平时常用的一些margin负值制作的效果，与大家分享！
先来看一下margin负值的原理解析图：
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移。例如：
/* 元素向上位移10px */
.demo {margin-top:-10px;}
二、当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。例如：
/* 所有紧随元素demo之后的元素向上位移10px */
.demo {margin-bottom:-10px;}
注：如果元素没有设置宽度，那么给该元素设置margin负值(left/right)将会在两个方向增大其宽度，看起来就好像给该元素添加了padding。
【案例解析】
一、三栏显示（无需浮动及额外标签）;
列表过长时，我们一般都会考虑通过浮动来使之显示为多列，其实换个思路也可以实现。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>negative margin 之列表三栏显示</title> 6 <style> 7 *{margin:0;padding:0;font-size: 14px;} 8 .goback{clear:both;height:30px;line-height:30px;text-align: center;} 9 10 ul {list-style:none;} 11 li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;} 12 .col2 {margin-left:120px;} 13 .col3 {margin-left:240px;} 14 .top {margin-top:-2.6em;} 15 </style> 16 </head> 17 <body> 18 <ul> 19 <li class="col1">10家国企年招待费超29亿 被指仅用于吃喝</li> 20 <li class="col1">媒体称中国豪车市场因政府严控公车快速萎缩</li> 21 <li class="col2 top">菲发言人笑答射杀台渔民事件</li> 22 <li class="col2">情妇打越洋电话提供证据</li> 23 <li class="col3 top">雷政富涉嫌受贿罪被检察机关提起公诉</li> 24 <li class="col3">日称冲绳久米岛附近海域发现疑似中国海军潜艇</li> 25 </ul> 26 </body> 27 </html>
二、叠加效果；
最常见的选项卡，当前项选中状态；
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>negative margin 之叠加</title> 6 <style> 7 *{list-style:none;margin:0;padding:0;font-size: 12px;} 8 .clearfix:after { 9 clear: both; 10 display: block; 11 height: 0; 12 line-height: 0; 13 visibility: hidden; 14 content: ""; 15 } 16 .clearfix {*zoom:1;} 17 .goback{clear:both;height:30px;line-height:30px;text-align: center;} 18 19 .demo{width:400px;} 20 .tab{ 21 border-bottom:1px solid #66CC66; 22 } 23 .tab li{ 24 float:left; 25 display:inline; 26 margin-left:8px; 27 } 28 .tab li a{ 29 background-color:#CCFFCC; 30 border:1px solid #66CC66; 31 color:#666; 32 display:block; 33 margin-bottom:-1px; 34 padding:0 5px; 35 line-height:20px; 36 float:left; 37 font-weight:bold; 38 text-decoration:none; 39 } 40 .tab li .current, 41 .tab li a:hover{ 42 background-color:#fff; 43 border-bottom:1px solid #fff; 44 _position:relative; 45 } 46 .cont{padding:10px;border:1px solid #6c6;border-top:0;} 47 </style> 48 </head> 49 <body> 50 <div class="demo"> 51 <div id="demo2"> 52 <ul class="tab clearfix"> 53 <li><a href="#" class="current">Tab One</a></li> 54 <li><a href="#">Tab Two</a></li> 55 <li><a href="#">Tab Three</a></li> 56 <li><a href="#">Tab Four</a></li> 57 </ul> 58 </div> 59 <div class="cont">荒凉的旷野，一群暴虐的劫匪正在鞭挞一位美丽的姑娘玛丽亚（萝蕾丹娜·卡波莱特 Loredana Cappelletti饰）。幸得迪亚戈（弗兰科·尼罗 Franco Nero饰）的解救。他神秘而冷峻，拖着一副棺材漫步在泥泞的荒野上。迪亚戈带着玛丽亚来到荒凉的小镇，人们对他的到来充满好奇，更对这副棺材里隐藏的秘密而惶惶不安。</div> 60 </div> 61 </body> 62 </html>