如何解決外邊距margin疊加的問題探討

2024-08-30 08:35:25

字體：大中小

供稿：網(wǎng)友

一、首先你要知道什么情況下會觸發(fā)：兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊

1.兩個或多個
說明其數(shù)量必須是大于一個，又說明，折疊是元素與元素間相互的行為，不存在 A 和 B 折疊，B 沒有和 A 折疊的現(xiàn)象。

2.毗鄰
是指沒有被非空內(nèi)容、padding、border 或 clear 分隔開，說明其位置關(guān)系。
注意一點，在沒有被分隔開的情況下，一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰；只有在一個元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會和它普通流中的最后一個子元素(非浮動元素等)的 margin-bottom 相鄰。

3.垂直方向
是指具體的方位，只有垂直方向的 margin 才會折疊，也就是說，水平方向的 margin 不會發(fā)生折疊的現(xiàn)象。

二、那么如何使元素上下margin不折疊呢？

1.浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）

2.創(chuàng)建了塊級格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊（注意這里指的是創(chuàng)建了BFC的元素和它的子元素不會發(fā)生折疊）

我們都知道觸發(fā)BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

很明顯大家可以看出來相鄰元素不發(fā)生折疊的因素是觸發(fā)BFC因素的子集，也就是說如果我為上下相鄰的元素設(shè)置了overflow:hidden，雖然觸發(fā)了BFC，但是上下元素的上下margin還是會發(fā)生折疊

這個問題其實和BFC并沒有太大的關(guān)系，希望大家不要濫用BFC，要知道BFC不是全能，創(chuàng)建BFC的初衷只是為了讓元素本身（包括它的子元素）能夠正確的計算自己的寬高。http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

不發(fā)生折疊的觸發(fā)因素是浮動元素、inline-block 元素、絕對定位元素，這個只是創(chuàng)建BFC因素的子集，但并不能說明創(chuàng)建了BFC的元素就不會發(fā)生折疊，因為BFC還可以用overflow:hidden來創(chuàng)建。相反如果父元素觸發(fā)了BFC，那么他的塊級子元素反而會發(fā)生折疊。

這里我寫了一個DEMO來說明這個問題：http://whycss.com/demo/collspan_demo.html 創(chuàng)建BFC的三種情況都提到了，結(jié)果是子元素的上下margin都會發(fā)生折疊。

克軍提到的最后一個zoom，這是IE瀏覽器最初支持的縮放屬性，到現(xiàn)在只有最新的webkit核心的瀏覽器也支持。但只是在IE8以下的瀏覽器下才可成功觸發(fā)hasLayout，對于非IE瀏覽器也是沒有效果的，所以還是需要同樣的去創(chuàng)建BFC。關(guān)于hasLayout與BFC的介紹可參見本人博客的文章http://www.smallni.com/?p=174

關(guān)于最終如何解決這樣的問題，我的建議是在寫的時候盡量用同一方向的margin，比如都設(shè)置為top或者bottom，因為你在實踐的時候有時不需要為每個元素設(shè)置浮動、inline-block或者absolute 。

上一篇：如何使整個頁面內(nèi)容居中使高度適應(yīng)內(nèi)容自動伸縮

下一篇：按照字體名稱調(diào)用字體讓瀏覽器顯示你希望的字體