黑松山资源网 Design By www.paidiu.com
问题描述
今天在修改页面样式的时候,遇到子元素设置 margin-top
但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个 margin-top
的效果。
今天就来说说整个问题产生的原因,以及解决方案。
问题分析
在MDN上面有这么一段文字:
块的上外边距( margin-top
)和下外边距( margin-bottom
)有时合并(折叠)为单个边距,其大小为单个边距的 最大值 ,这种行为称为 边距折叠
。 注意:只有上下边距会产生折叠,左右边距不会产生折叠。
有三种情况会产生边距折叠:
1、同一层相邻元素之间
<div class="A">元素A</div> <div class="B">元素B</div> <style> .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-bottom: 10px; } .B { background: pink; margin-top: 20px; } </style>
上面两个p标签之间的间隔是20px。
解决办法:
第二个元素B,设置清除浮动clearfix
.clearfix::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .clearfix { zoom: 1; }
2、父子元素之间没有内容
例子中,A,B元素与父元素box之间没有其他元素的情况下:
<div class="box"> <div class="A">元素A</div> <div class="B">元素B</div> </div> <div class="next">Next</div> <style> .box { margin-top: 10px; margin-bottom: 10px; background: #eee; } .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-top: 20px; } .B { background: pink; margin-bottom: 20px; } .next { height: 50px; background: #eee; } </style>
解决办法:
- 父元素创建块级格式上下文(
overflow:hidden
) - 父元素设置上下border(
border: 1px solid transparent
) - 父元素设置上下padding(
padding: 1px 0
) - 子元素采用浮动
float
或者定位position
的方式排列。
注意:即使设置父元素的外边距是0, margin: 0
,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
3、空的块级元素
当元素B的 margin-top
直接贴到元素A的 margin-bottom
的时候( 也就是中间的元素没有内容 ),也会发生边界折叠。
<div class="top">top</div> <div class="middle"></div> <div class="bottom">bottom</div> <style> .top,.bottom { width: 50px; height: 50px; background: pink; } .middle { margin-top: 10px; margin-bottom: 20px; } </style>
解决方法:
- middle元素清除浮动: clearfix
- middle元素创建块级格式上下文:overflow:hidden
- middle元素设置为行内块元素: display: inline-block;
- middle元素设置高度: height: 1px;
- middle元素设置最小高度:min-height: 1px;
- middle元素设置border:border-top: 1px solid transparent;
- middle元素设置padding:padding-top: 1px;
注意事项
- 如果参与折叠的margin中包含负值,折叠后的margin的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和;也就是说如果有-10px,10px,30px叠在一起,margin的范围就是 30px-10px=20px。
- 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路