外边距折叠现象
2021/11/13 6:11:05
本文主要是介绍外边距折叠现象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、合并现象
(1)、场景:垂直布局的块级元素,上下的margin会合并;
(2)、结果:最终两者距离为margin的最大值;
(3)、解决方法:只给其中一个盒子设置margin即可;
eg:
2、塌陷现象
(1)、场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上,结果;导致父元素一起 往下移动;
(2)、解决方法:
① 、给父元素设置border-top 或者padding-top (分隔父子元素的margin-top);
②、给元素设置overflow: hidden;
③、转换成行内块元素;
④、设置浮动;
这篇关于外边距折叠现象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了