1. 頁面上實現css sprite背景定位效果
使用img定義margin的負值實現類似background-position效果。此方法能減少一個頁面請求數，但是有違樣式與布局分離的原則，因此不推薦使用。使用margin負值在IE6/IE7下的bug：有一部分被隱藏掉了
<div style="height:120px;width:120px; border: 5px solid #888">
<div style="background-color:#CEE1EE;margin-top: -10px;position:relative;zoom:1">
<a >網奇網站制作</a></div>
</div>
解決方法：添加position:relative; zoom:1;
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. 在流動性布局中的應用
如WordPress的兩欄式不固定布局就是使用margin負值來實現的定位，屬于左右margin負值在流動性布局中的應用。
<div style="width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;">左側寬度固定</div>
<div style="backround:#888;margin-left:200px;">寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。</div>
另外一類兩欄自適應用到的是margin的上下負值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中最為常見。高度不固定欄和高度固定的欄上下錯開，均無浮動屬性，高度不固定的欄margin-top一個負值，大小就是高度固定欄的高度，實現了兩欄在同一水平線上。且寬度自適應，并且不用擔心有浮動出現的一系列問題。
樣式部分：
.fixed-height{height:200px;width:200px;background:#666;}
.flow-height{margin-top:-200px;margin-left:200px;}
頁面結構：
<div class="container">
<div class="fixed-height">高度固定哦</div>
<div class="flow-height">高度寬度自適應，啦啦啦。。。高度寬度自適應，啦啦啦。。。</div></div>
5.隱藏首（末）邊框
本著結構盡量簡潔，樣式代碼盡量少，減少對js的依賴的原則，我們可以用樣式來實現列表項頭尾無邊框的效果，而無需額外設置諸如<li class=”last”>最后一個</li>
樣式部分：
<style type="text/css">
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)，所以也需要設置父容器