爲什麼使用負邊距？

Question

只是看一些CSS這裏，我注意到：

.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;} 

你爲什麼會把-30和-25px利潤？

Answer 1

我開始輸入答案，然後發現一個更好的here（Wayback Machine backup）。一些要點：

切緣陰性：

• 是有效的CSS
• 不破頁面流
• 有高水平的跨瀏覽器兼容的（儘管如果他們打破你的鏈接或然後嘗試添加位置：相對;應該修復它）

它們對未懸浮的麝香葡萄酒的影響NTS：

• 它們應用到頂部或左側元件的「拉」在適當的方向（多個）
• 該元素然而，把它們應用到一個元件的底部或右「拉」立即後續元素放進去，使它們重疊

及其對浮動元素的效果：

• 這是更復雜，我不能總結比文章更好。在Firebug中玩一玩，感受他們。

有負保證金使用的一些光輝的榜樣那篇文章（尤其是三欄佈局！魔術隊。我爲頁面佈局之前使用a similar technique）。對他們來說，最常見的用法，我發現在只是爲了移動一個元素來修正它的位置，並且爲了視覺效果使一個元素重疊。

Answer 2

負利潤率會有所幫助，當你有其他元素「圍繞」要如有所有其他元素的填充。我經常用它，讀到這裏，爲什麼： http://www.simplebits.com/notebook/2005/05/23/negative.html

Answer 3

很多技巧和好的效果的使用負邊距：

圖片更換絕招 - 當你想使用特定的字體，你就是不能撕掉它，圖像替換是訣竅。使用負邊距推出常規字體並將其替換爲「圖片」字體。

帶邊框圖像翻轉 - 以像素爲邊界大小給予負緣至圖像相同的大小將保持圖像，因此，佈局，從上翻轉移位。

中心屏幕定位 - 使用負利潤率尺寸相同的高度，要居中的對象的寬度，你可以在瀏覽器的中間居中的對象。

Answer 4

其實我覺得有一個用例，其中切緣陰性是唯一正確的事情：

你想要一個盒子的一部分延伸到整個父，甚至超過了填充。因此，不要刪除父元素的填充值，而是將其應用於所有孩子，以免遇到特殊情況，您可以給出特殊情況下的負值。也沒有討價還價的定位。工程很好，非常可讀。例如：http://codepen.io/anon/pen/DpHvu