CSS 中的負邊距

margin 是可以設置為負值的，這會幫你實現靠近頂部/左邊相鄰元素的效果，或者實現靠近底部/右邊相鄰元素的效果。

先介紹下我們的測試元素：一個簡單的包含三個段落的容器元素。注意，段落設置了固定寬度 250px。

<div class="test-container"> <p>First paragraph with a bit of text in it to provide some content.</p> <p>Second paragraph with a bit of text in it to provide some content.</p> <p>Third paragraph with a bit of text in it to provide some content.</p></div><style> * { box-sizing: border-box; } .container {border: 5px double;width: 300px;padding: 0 10px; }.container p {border: 1px solid;width: 250px; } </style>

效果：

負邊距 margin-top/bottom

先給第一段文本 margin-bottom: -15px，結果第二段文本的經瀏覽器重新計算，向上提升了 15px。

第二段文本作為鄰居緊跟在第一段文本后面，第二段文本和第三段文本之間的間距沒有變化，整體依舊是垂直布局。

這個技巧比較適合用來微調位置，如果一個元素想要輕微的蓋住前面一個元素的話，可以使用它。

現在恢復布局，給第二段文本 margin-top: -15px 看看效果。

可以看見，跟在第一段文本使用 margin-bottom: -15px 的效果一樣。第二段文本在此被向上提升了 15px。通過在瀏覽器控制臺查看，第一段文本的 margin-bottom 仍是默認的 1rem。

邊距合并（Margin collapsing）

邊距塌陷行為在負邊距上的行為是不同的。

針對負邊距場景：如果相鄰兩元素中一個是正邊距，一個負邊距，則 相鄰間距（adjoining margin）= 正邊距 - 負邊距絕對值（結果兩元素相交和相離，取決于誰的絕對值更大）；如果相鄰兩元素中沒有正邊距，則 相鄰邊距 = 0 - 邊距 1 絕對值 - 邊距 2 絕對值（結果兩元素相交）。

對正邊距來說，規則是這樣的：瀏覽器會比較第一段文本的 margin-bottom 和第二段文本的 margin-top，誰的值大，最終間距就是誰，以 margin-bottom: 16px 和 margin-top: 4px 為例，那么最終的間距為 16px；而對存在負邊距的場景就不是這樣了，像上面一個是 margin-bottom: 1em（假設是 16px），一個是 margin-bottom: -15px，那么按照規則，最終的間距是 16px - 15px，得 1px，因為是正值，所以表示兩者相離 1px 的距離。

可以看見，我們可以使用負邊距達到兩元素相互靠近的布局，而不會受到邊距合并的影響。

到這里，算是介紹完負邊距 margin-top/bottom 的情況了。

負邊距 margin-left/right

負邊距 margin-left/right 的工作方式與 margin-top/left 一樣，元素還是有一個固定寬度。下面分別給第一和第二個文本段落設置 margin-left: -10px 和 margin-right: -10px。

可以看見，第一個段落向左偏移了 10px，寬度沒有變化，同時右邊緣也向左移動了 10px。

第二個段落的負 margin-right 值沒有起作用。因為 margin-right 負值影響的是第二個段落右面的元素，當前第二個段落右邊是沒有元素的，因此看不到效果。

為了展示 margin-right 負值效果，需要將段落元素設置成浮動的，這樣就有右邊的相鄰元素了。

現在在段落上設置負邊距。

可以看見，因為第一個段落設置了 margin-right: -10px，導致第二個段落向左偏移 10px。這跟之前看到的 margin-bottom 負值的效果是一樣的。

同時，第二個段落設置了 margin-top: -10px，于是向上偏移了 10px。第三個元素設置了 margin-bottom: -10px，但沒有效果，是因為底部沒有元素。

注：margin-bottom: -10px 產生了影響，效果沒有出來不只是因為底部沒有元素——我們將第一個元素刪除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三個段落元素的負邊距絕對值，即 10px（如下圖）。而之前沒有塌陷的原因是因為第一個元素的高度撐開了父元素，導致父元素高度無法塌陷。

<figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">GIF.gif</figcaption>

需要注意的是，邊距合并只適用于 margin-top 和 margin-bottom 屬性，不對 margin-left、margin-right 起作用，所以不用擔心這里的左右邊距的合并問題。

如果，我們只是給第二個段落設置 margin-left: -10px，能看到同樣的效果。

可以看見，在元素固寬情況下，margin-left、margin-right 負值的行為表現跟 margin-top 和 margin-bottom 負值的行為表現是一樣的。

width: auto 和 margin-right 負值

現在不為段落設置固定寬度，而是讓它們使用默認的 width: auto 設置觀察 margin-right 的負值行為表現。默認情況下，width: auto 段落元素默認會充滿在父元素寬度，同時受限于父元素的 padding。

現在分別給第一和第二個段落設置 margin-left: -10px 和 margin-right: -10px，第三個元素同時設置 margin-left: -10px、margin-right: -10px 查看效果。注意，為了方便對照，這里加入了一個參考元素（Reference paragraph）：

觀察發現：第一個段落向左偏移了 10px，寬度增加了，右邊緣未受到影響，位置未變；第二個段落向右偏移了 10px，寬度增加了，左邊緣未受到影響，位置未變。這種情況，只在 width: auto 下發生，這與固定寬度的元素表現是不一樣的。

第三個段落的左右兩端都使用負邊距值，導致左右都向外延伸了 10px 的距離，正好抵消了容器元素左右 10px 的 padding。這是負邊距最常用的應用場景——為了讓內容與容器間保持一定的留白間隙，容器設置了 padding，但是內容里的一個標題需要延伸到整個容器的寬度展示（不畏外部 padding 值），這就到使用負邊距的時候了。

這里貼出了上面結構的樣式（容器元素設置了 padding: 10px）。

h5 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so defaults to width: auto */ }復制代碼

再一次要說明的是，這只在標題元素 width: auto 的情況下才能生效，不過這已經覆蓋 99% 的實際使用場景了。

以上即是對負邊距在簡單場景下行為表現的闡述，以此為基礎，我們就可以進一步研究負邊距在彈性布局和網格布局中的行為表現了。

從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰【視頻＋工具＋系統路線圖】都有整理，在線解析，學習指導，點：【WEB前端學習圈⑤】

總結

以上是生活随笔為你收集整理的css 高度塌陷_web前端入门到实战：CSS 负边距的行为表现的全部內容，希望文章能夠幫你解決所遇到的問題。

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