【HTML/CSS】margin塌陷和合并问题
生活随笔
收集整理的這篇文章主要介紹了
【HTML/CSS】margin塌陷和合并问题
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 margin塌陷問(wèn)題
1.1 示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin塌陷</title><style>.parent{width: 200px;height: 200px;background-color: red;margin-left: 100px;margin-top: 100px;}.child{width: 100px;height: 100px;background-color: blue;margin-left: 50px;margin-top: 50px; /*子元素的margin-top無(wú)效？*/}</style> </head> <body><div class="parent"><div class="child"></div></div> </body> </html>顯示如下圖所示，從圖中可以看到子元素的margin-top沒(méi)有顯示出來(lái)，希望的是距離父盒子的頂部50px，但是現(xiàn)在和頂部重疊了，這就發(fā)生了margin塌陷。
造成的原因是：父子處于同一個(gè)BFC中，在同一個(gè)BFC中會(huì)出現(xiàn)垂直方向的margin重疊，margin重疊取最大值，即父元素的margin-top:100px。
1.2 margin塌陷的解決
可以觸發(fā)BFC，改變父級(jí)的渲染規(guī)則。
2 margin合并問(wèn)題
2.1 示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin合并</title><style>.one{background-color: red;height: 100px;width: 100px;margin-bottom: 100px;}.two{background-color: blue;height: 100px;width: 100px;margin-top: 50px;}</style> </head> <body><div class="one"></div><div class="two"></div> </body> </html>如下圖所示，兩個(gè)兄弟塊之間的margin合并了，顯示的是較大值。
2.2 解決方法
總結(jié)
以上是生活随笔為你收集整理的【HTML/CSS】margin塌陷和合并问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 自然语言处理语言资源项目
- 下一篇： 新研究表明 深层神经网络的功能存在局限性