*/
#mydiv1{margin-bottom:-10px;}
如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding
在浮动中使用负边距
加入下面就是我们的html代码：
XML/HTML Code复制内容到剪贴板
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
如果对一个浮动的元素使用负边距，它会产生一个空白，其他元素就可以覆盖这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%，另一列有固定的宽度，比如说100px。
CSS Code复制内容到剪贴板
/*
A negative margin is applied opposite the float
*/
#mydiv1 {float:left; margin-right:-100px;}
如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。
如果负边距和宽度一样大的话，它就会被完全覆盖掉。因为外边距，内边距，边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。
学以致用
既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。
把单个列表变成三列
如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？负边距可以让你在不增加任何浮动和标签的情况下完成。你会发现用负边距实现这个是多么地简单，就像下面：
HTML
XML/HTML Code复制内容到剪贴板
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>
CSS
CSS Code复制内容到剪贴板
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
