譯負邊距詳解

原文the definitive guide to using negative margins

自從2023年css2作為推薦以來，**的使用漸漸退去，成為歷史。正因為此，從那以後css布局成為了優雅**的代名詞。

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

負邊距的使用如下：

#content

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

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

乙個static元素是乙個沒有使用過float的元素。上面的展示了乙個static的元素使用負邊距之後的情況。

加入下面就是我們的html**：

first second

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

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

故意重疊元素也是一種很好地設計隱喻。重疊效果可以增強深度感從而為突出特定元素。乙個很好地例子就像上圖一樣，通過重疊來吸引注意力。只需要使用z-index屬性和一點小創意你就可以做到。

這是乙個精緻的技巧。通過使用兩個檢視的兩種顏色建立safari一樣有點傾斜的效果。然後通過負邊距來把其中乙個疊加到另乙個上面，保持1到2畫素的偏移。這樣你就可以二道可選的，機器友好的傾斜字型。就不需要浪費很多貸款來載入大的來實現這個效果啦

負邊距也是在流式布局中建立簡單一列寬度固定，一列內容為寬度的100%的兩列布局的好方法。

html

main content in here i』m the sidebar!

css

#content #sidebar

哈哈，這樣你就得到了乙個簡單的兩列布局。它也能在ie6完美的渲染出來。現在為了讓#sidebar不要被#content給掩蓋，只要簡單的加上：

#content p

/* it』s 200px + 10px, the 10px being an additional margin.*/

當適當的使用的時候，負外邊距能夠提供乙個靈活的文件結構，完爆table的布局。靈活的文件布局是一種可訪問性和seo的技巧，通過它能夠讓你根據你的關注點以任意順序組織你的html**。這裡有乙個文章討論了負邊距在多列布局中的應用。

這是負外邊距最常也是最簡單的使用方式。假如你把第十個div插入到9個其他的div中，不知道什麼原因沒有正確的排列，使用負邊距來調整這個div就不需要改變其他9個div了，很方便。

在float中使用負邊距可能會在舊的瀏覽器造成一些問題，比如下面的這些：

解決方法：只要新增position:relative，就可以啦。

如果你運氣不好剛好在辦公室使用ie6，當遇到覆蓋和浮動的時候內容有些時候回突然被剪下掉。

解決方法：同樣的只要給浮動元素加上position:relative，所有的問題就解決啦。

譯 負邊距詳解