CSS負邊距的行為表現方法

這篇文章主要講解了“CSS負邊距的行為表現方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS負邊距的行為表現方法”吧！

　　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 產生了影響，效果沒有出來不只是因為底部沒有元素&mdash;&mdash;我們將第一個元素刪除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三個段落元素的負邊距絕對值，即 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。這是負邊距最常用的應用場景&mdash;&mdash;為了讓內容與容器間保持一定的留白間隙，容器設置了 padding，但是內容里的一個標題需要延伸到整個容器的寬度展示（不畏外部 padding 值），這就到使用負邊距的時候了。

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

　　h6 { 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% 的實際使用場景了。

感謝各位的閱讀，以上就是“CSS負邊距的行為表現方法”的內容了，經過本文的學習后，相信大家對CSS負邊距的行為表現方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！