margin合并

 

不同情况的margin合并

两个竖直方向上相邻的margin会发生合并。合并的margin的高度等于两者中的较大者。

兄弟关系

img

父子关系

img

当父元素没有设置内边距或边框，以及没有触发BFC时，如果子元素的margin值大于父元素的margin值，就会发生margin塌陷。解决方法是给父元素添加边框或内边距，但不建议使用，因为会破坏布局。

空元素

img

解决办法

解决办法就是让元素产生BFC即可。

posted @   hdxg  阅读(119)  评论(0)  编辑  收藏  举报
相关博文：
·  清除浮动的细节——clearance
·  float和清除浮动
·  使用margin布局，塌陷合并及解决方法
·  css-margin折叠现象：合并和塌陷
·  css - margin外边距的塌陷问题
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css
点击右上角即可分享
微信分享提示