http://fed.renren.com/archives/517
最近做的項目中經常會用到margin的負值，這裏就總結一下關於margin負值的5種使用及相關bug的解決。
1. 在流動性佈局中的應用
如WordPress的兩欄式不固定佈局就是使用margin負值來實現的定位，屬於左右margin負值在流動性佈局中的應用。
左側寬度固定
</div>
<div style=”backround:#888;margin-left:200px;”>
寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。
</div>
另外一類兩欄自適應用到的是margin的上下負值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄佈局中最爲常見。高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top一個負值，大小就是高度固定欄的高度，實現了兩欄在同一水平線上。且寬度自適應，並且不用擔心有浮動出現的一系列問題。
樣式部分：
height:200px;
width:200px;
background:#666;
}
.flow-height{
margin-top:-200px;
margin-left:200px;
}
頁面結構：
<div class=”fixed-height”>
高度固定哦
</div>
<div class=”flow-height”>
高度寬度自適應，啦啦啦。。。高度寬度自適應，啦啦啦。。。
</div>
</div>
2. 在選項卡等邊框線的處理
下圖顯示的是一種比較常見的選項卡。
如圖，使用margin-bottom:-1px;解決選項卡下邊框顯示的問題。[注：]使用margin-top、margin-bottom需要看結構如何寫，靈活使用。
類似的，如果您要用七個div實現8條1像素的左右邊框，可以讓每個div都有左右1像素的邊框，然後margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊來達到效果。
3. 圖片與文字對齊問題
當圖片與文字在一起，往往都是不對齊的，因爲圖片和文字默認是底部對齊。當圖片較小比較明顯，使用vertical-align:middle;對齊，在firefox，chrome下能達到理想效果，但是IE下還是有點彆扭。
使用margin負值能在每個瀏覽器上顯示完全一致。img標籤支持margin四個方向的正的和負的定位。一般使用img標籤來顯示圖標，要與文字對齊達到理想的效果，可以設置img{margin:0 3px -3px 0;}。
4. 隱藏首（末）邊框
本着結構儘量簡潔，樣式代碼儘量少，減少對js的依賴的原則，我們可以用樣式來實現列表項頭尾無邊框的效果，而無需額外設置諸如<li class=”last”>最後一個</li>
樣式部分：
ul{
margin:30px;
padding:0;
width:300px;
}
li{ list-style:none;}
/** 橫排模式 **/
.cross{
overflow:hidden;
zoom:1;
} /** overflow:hidden隱藏最上邊border，IE6需要zoom:1 **/
.cross li {
float:left;
padding:0 11px 0 10px;
border-left:1px solid #AAA;
margin-left:-1px;
} /*margin負值隱藏掉最左邊邊框*/
/*豎排模式*/
.vertical {
overflow:hidden;
position:relative;
zoom:1;
} /*IE下子容器如果包含屬性position:relative，則父容器失效(IE bug)，所以也需要設置父容器position:relative解決，IE6需要zoom:1來觸發haslayout*/
.vertical li{
border-top:1px dashed #CEE1EE;
padding:5px 0;
position:relative;
top:-1px;
} /*豎排margin負值IE6不兼容，改爲positon方式處理，與margin負值原理相同*/
</style>
結構部分：
<li>tab1-1</li>
<li>tab1-2</li>
<li>tab1-3</li>
<li>tab1-4</li>
</ul>
<ul class=”vertical”>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
<li>這裏是一條信息</li>
</ul>
5.頁面上實現css sprite背景定位效果
使用img定義margin的負值實現類似background-position效果。此方法能減少一個頁面請求數，但是有違樣式與佈局分離的原則，因此不推薦使用。
ps:
使用margin負值在IE6/IE7下的bug：有一部分被隱藏掉了
<div style=”background-color:#CEE1EE;margin-top: -10px;position:relative;zoom:1″>
<a href=”http://fed.renren.com/”>人人前端測試</a></div>
</div>
解決方法：添加position:relative; zoom:1;
