垂直相鄰margin合並解決方法
阿新 • • 發佈:2018-03-27
src 普通 改變 splay pad bottom upload 解決方案 子元素
同理,如果一個無內容的空元素,其自身上下邊距也會產生重疊。
外邊距重疊的意義
外邊距的重疊只產生在普通流文檔的上下外邊距之間,這個看起來有點奇怪的規則,其實有其現實意義。設想,當我們上下排列一系列規則的塊級元素(如段落P)時,那麽塊元素之間因為外邊距重疊的存在,段落之間就不會產生雙倍的距離。
外邊距(margin)重疊示例
外邊距重疊是指兩個垂直相鄰的塊級元素,當上下兩個邊距相遇時,起外邊距會產生重疊現象,且重疊後的外邊距,等於其中較大者。
圖示:
另一個重疊現象是當一個元素包含在另一個元素之中時,子元素與父元素之間也會產生重疊現象,重疊後的外邊距,等於其中最大者:
同理,如果一個無內容的空元素,其自身上下邊距也會產生重疊。
a、全部都為正值,取最大者;
b、不全是正值,則都取絕對值,然後用正值減去最大值;
c、沒有正值,則都取絕對值,然後用0減去最大值。
-
-
外層元素加【padding】 代替。寬度等於外邊距值padding-bottom:50px;(有時候不合適)
-
內層元素加【絕對定位】 postion:absolute;(缺點:改變了位置)
-
內層元素加【float:left;】或【display:inline-block;】(缺點:改變了位置)
-
內層元素加【padding】。寬度等於外邊距值padding-top:50px;(有時候不合適)
-
內層元素加【透明邊框】 代替。邊框寬度等於外邊距值 border-top:50px solid transparent;(缺點:如果有背景顏色,看起來就像改變了大小)
垂直相鄰margin合並解決方法