CSS负边距详解

自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。

对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.）

负边距的使用如下：

#content {margin-left:-100px;}

负边距通常在小范围使用。但是接下来你会看到，它能做的事情很多。下面是一些你应该知道的关于负边距的事情：

它是相当好的兼容性
负边距基本上被所有现代的浏览器支持（IE6的大部分情况也是）

负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。

在static元素中使用负边距：

一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。

当一个static元素在top/left使用负边距时，它把元素向这个特定的方向拉，比如

/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}

但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。

/*
所有在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
*/
#mydiv1{margin-bottom:-10px;}

如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding

在浮动中使用负边距：

负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。

html代码：

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS：

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖，只要简单的加上：

/* Prevent text from being overlapped */
#content p {margin-right:210px;}
/* It’s 200px + 10px, the 10px being an additional margin.*/

注：本内容来源于网络，如有侵权，请告知！