自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以后CSS布局成為了優雅代碼的代名詞。

對于所有設計師使用過的CSS概念，負邊距作為最少討論到的定位方式要記上一功。這就像是在線紋身-每個人都會做，但是沒有人會談論它。(It’s

like an online taboo—everyone’s doing it, yet no one wants to talk

about it.)

為其正名

我們都使用過CSS得外邊距，但是當談到負邊距的時候，我們好像往差的方向發展啦。在網頁設計中負邊距的使用出現了兩種極端，一種特別喜歡它，也有一些人認為這完全就是魔鬼的作品。

負邊距的使用如下：

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

負邊距通常在小范圍使用。但是接下來你會看到，它能做的事情很多。下面是一些你應該知道的關于負邊距的事情：

他們是完全有效的CSS這不是在跟你開玩笑。W3C甚至都說，在外邊框中使用負邊距是允許的。要了解更多可以點擊這篇文章負邊距不是在hack這是尤其正確的。正是因為沒有很好地了解負邊距才是導致各種奇怪的問題。只有在被用來解決其他地方的bug的時候才是hack它符合正常的文檔流當負邊距使用在沒有浮動的元素上時并不會破壞正常的文檔流。所以付過你使用負邊距把元素向上微調的話，所有后面的元素也會向上微調。它是相當好的兼容性負邊距基本上被所有現代的瀏覽器支持(IE6的大部分情況也是)當使用了float之后，會有不同的表現負邊距不是你平常使用的屬性，所以使用的時候要格外小心。Dreamweaver不理解它負邊距不會在DW的設計窗口展示出效果。那你為什么還用DW的設計窗口查看效果呢？與其共事

負邊距如果可以正確的使用的話它的功能是很強大的。有兩種場景負邊距是很重要的。

在static元素中使用負邊距

??一個static元素是一個沒有使用過float的元素。上面的圖片展示了一個static的元素使用負邊距之后的情況。

當一個static元素在top/left使用負邊距時，它把元素向這個特定的方向拉，比如

#mydiv1 {margin-top:-10px;}

但是當你將負邊距設置為相對bottom/right時，它并不會把元素向下或右拉，相反，它會把后面的元素往里面拉，從而覆蓋自己。

#mydiv1{margin-bottom:-10px;}

如果寬度沒有設置，左右負邊距會把元素向兩個方向拉以增加寬度。在這里margin的作用相當于padding在浮動中使用負邊距

加入下面就是我們的html代碼：

id="mydiv1">First

id="mydiv2">Second

如果對一個浮動的元素使用負邊距，它會產生一個空白，其他元素就可以覆蓋這一部分。這個技巧可以很好地用戶流式布局。比如有一列寬度100%，另一列有固定的寬度，比如說100px。

#mydiv1 {float:left; margin-right:-100px;}

如果兩個元素都使用了左浮動并且設置margin-right:-20px。#mydiv2會把#mydiv1看成寬度縮小20px(所以會覆蓋一部分)，但是有趣的是#mydiv1并不會有任何變化，而是依然保持原先的寬度。如果負邊距和寬度一樣大的話，它就會被完全覆蓋掉。因為外邊距，內邊距，邊框和內容加起來等于元素的寬度。如果負外邊距等于元素的寬度的話，那么該元素的寬度就會變成0px。學以致用

既然我們知道使用負邊距在CSS2中是有效的，使用它可以給我們提供一些非常有趣的CSS技巧。

把單個列表變成三列

如果你有一個列表垂直方向太長了，為什么不把它分成幾列呢？負邊距可以讓你在不增加任何浮動和標簽的情況下完成。你會發現用負邊距實現這個是多么地簡單，就像下面：

HTML

class="col1">Eggs

?class="col1">Ham

?class="col2

top">Bread

?class="col2">Butter

?class="col3

top">Flour

?class="col3">Cream

?

CSS

ul

{list-style:none;}

li

{line-height:1.3em;}

?.col2

{margin-left:100px;}

?.col3

{margin-left:200px;}

?.top

{margin-top:-2.6em;}

?

通過對.top的添加margin-top:-2.6em。所有的元素會完美的對齊好。使用負邊距會比使用相對定位好很多，因為你只需要給新的一列的第一個元素添加負邊距即可。酷吧，哈哈哈

總結

以上是生活随笔為你收集整理的html中设置负边距的意义,css负边距之详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。