CSS 中的負(fù)邊距

margin 是可以設(shè)置為負(fù)值的，這會(huì)幫你實(shí)現(xiàn)靠近頂部/左邊相鄰元素的效果，或者實(shí)現(xiàn)靠近底部/右邊相鄰元素的效果。

先介紹下我們的測(cè)試元素：一個(gè)簡(jiǎn)單的包含三個(gè)段落的容器元素。注意，段落設(shè)置了固定寬度 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>

效果：

負(fù)邊距 margin-top/bottom

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

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

這個(gè)技巧比較適合用來(lái)微調(diào)位置，如果一個(gè)元素想要輕微的蓋住前面一個(gè)元素的話，可以使用它。

現(xiàn)在恢復(fù)布局，給第二段文本 margin-top: -15px 看看效果。

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

邊距合并（Margin collapsing）

邊距塌陷行為在負(fù)邊距上的行為是不同的。

針對(duì)負(fù)邊距場(chǎng)景：如果相鄰兩元素中一個(gè)是正邊距，一個(gè)負(fù)邊距，則 相鄰間距（adjoining margin）= 正邊距 - 負(fù)邊距絕對(duì)值（結(jié)果兩元素相交和相離，取決于誰(shuí)的絕對(duì)值更大）；如果相鄰兩元素中沒有正邊距，則 相鄰邊距 = 0 - 邊距 1 絕對(duì)值 - 邊距 2 絕對(duì)值（結(jié)果兩元素相交）。

對(duì)正邊距來(lái)說(shuō)，規(guī)則是這樣的：瀏覽器會(huì)比較第一段文本的 margin-bottom 和第二段文本的 margin-top，誰(shuí)的值大，最終間距就是誰(shuí)，以 margin-bottom: 16px 和 margin-top: 4px 為例，那么最終的間距為 16px；而對(duì)存在負(fù)邊距的場(chǎng)景就不是這樣了，像上面一個(gè)是 margin-bottom: 1em（假設(shè)是 16px），一個(gè)是 margin-bottom: -15px，那么按照規(guī)則，最終的間距是 16px - 15px，得 1px，因?yàn)槭钦?#xff0c;所以表示兩者相離 1px 的距離。

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

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

負(fù)邊距 margin-left/right

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

可以看見，第一個(gè)段落向左偏移了 10px，寬度沒有變化，同時(shí)右邊緣也向左移動(dòng)了 10px。

第二個(gè)段落的負(fù) margin-right 值沒有起作用。因?yàn)?margin-right 負(fù)值影響的是第二個(gè)段落右面的元素，當(dāng)前第二個(gè)段落右邊是沒有元素的，因此看不到效果。

為了展示 margin-right 負(fù)值效果，需要將段落元素設(shè)置成浮動(dòng)的，這樣就有右邊的相鄰元素了。

現(xiàn)在在段落上設(shè)置負(fù)邊距。

可以看見，因?yàn)榈谝粋€(gè)段落設(shè)置了 margin-right: -10px，導(dǎo)致第二個(gè)段落向左偏移 10px。這跟之前看到的 margin-bottom 負(fù)值的效果是一樣的。

同時(shí)，第二個(gè)段落設(shè)置了 margin-top: -10px，于是向上偏移了 10px。第三個(gè)元素設(shè)置了 margin-bottom: -10px，但沒有效果，是因?yàn)榈撞繘]有元素。

注：margin-bottom: -10px 產(chǎn)生了影響，效果沒有出來(lái)不只是因?yàn)榈撞繘]有元素——我們將第一個(gè)元素刪除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三個(gè)段落元素的負(fù)邊距絕對(duì)值，即 10px（如下圖）。而之前沒有塌陷的原因是因?yàn)榈谝粋€(gè)元素的高度撐開了父元素，導(dǎo)致父元素高度無(wú)法塌陷。

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

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

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

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

width: auto 和 margin-right 負(fù)值

現(xiàn)在不為段落設(shè)置固定寬度，而是讓它們使用默認(rèn)的 width: auto 設(shè)置觀察 margin-right 的負(fù)值行為表現(xiàn)。默認(rèn)情況下，width: auto 段落元素默認(rèn)會(huì)充滿在父元素寬度，同時(shí)受限于父元素的 padding。

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

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

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

這里貼出了上面結(jié)構(gòu)的樣式（容器元素設(shè)置了 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 */ }復(fù)制代碼

再一次要說(shuō)明的是，這只在標(biāo)題元素 width: auto 的情況下才能生效，不過(guò)這已經(jīng)覆蓋 99% 的實(shí)際使用場(chǎng)景了。

以上即是對(duì)負(fù)邊距在簡(jiǎn)單場(chǎng)景下行為表現(xiàn)的闡述，以此為基礎(chǔ)，我們就可以進(jìn)一步研究負(fù)邊距在彈性布局和網(wǎng)格布局中的行為表現(xiàn)了。

從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋系統(tǒng)路線圖】都有整理，在線解析，學(xué)習(xí)指導(dǎo)，點(diǎn)：【W(wǎng)EB前端學(xué)習(xí)圈⑤】

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。