margin的重疊與防治

1、水平邊距永遠不會重合。
2、在規範文檔中,2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下:
a、全部都爲正值,取最大者;
b、不全是正值,則都取絕對值,然後用正值減去最大值;
c、沒有正值,則都取絕對值,然後用0減去最大值。
注意:相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。
3、相鄰的盒模型中,如果其中的一個是浮動的(float),垂直margin不會重疊,並且浮動的盒模型和它的子元素之間也是這樣。
4、設置了overflow屬性的元素和它的子元素之間的margin不被重疊(overflow取值爲visible除外)。
5、設置了絕對定位(position:absolute)的盒模型,垂直margin不會被重疊,並且和他們的子元素之間也是一樣。
6、設置了display:inline-block的元素,垂直margin不會重疊,甚至和他們的子元素之間也是一樣。
7、如果一個盒模型的上下margin相鄰,這時它的margin可能重疊覆蓋(collapse through)它。在這種情況下,元素的位置(position)取決於它的相鄰元素的margin是否重疊。
a、如果元素的margin和它的父元素的margin-top重疊在一起,盒模型border-top的邊界定義和它的父元素相同。
b、另外,任意元素的父元素不參與margin的重疊,或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零,那麼元素的border-top邊界位置和原來一樣。
一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。
注意,那些已經被重疊覆蓋的元素的位置對其他已經重疊的元素的位置沒有任何影響;只有在對這些元素的子元素定位時,border-top邊界位置纔是必需的。

8、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例
外邊距重疊是指兩個垂直相鄰的塊級元素,當上下兩個邊距相遇時,起外邊距會產生重疊現象,且重疊後的外邊距,等於其中較大者。
圖示:

另一個重疊現象是當一個元素包含在另一個元素之中時,子元素與父元素之間也會產生重疊現象,重疊後的外邊距,等於其中最大者:
兩個元素下上疊加
同理,如果一個無內容的空元素,其自身上下邊距也會產生重疊。
內外元素同向疊加

外邊距的重疊只產生在普通流文檔的上下外邊距之間,這個看起來有點奇怪的規則,其實有其現實意義。設想,當我們上下排列一系列規則的塊級元素(如段落P)時,那麼塊元素之間因爲外邊距重疊的存在,段落之間就不會產生雙倍的距離。

防止外邊距重疊解決方案:
雖然外邊距的重疊有其一定的意義,但有時候我們在設計上卻不想讓元素之間產生重疊,那麼可以有如下幾個建議可供參考:

  1. 外層元素padding代替
  2. 內層元素透明邊框 border:1px solid transparent;
  3. 內層元素絕對定位 postion:absolute:
  4. 外層元素 overflow:hidden;
  5. 內層元素 加float:left;或display:inline-block;
  6. 內層元素padding:1px;

以上建議可根據實際情況來採取。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章