脚本宝典收集整理的这篇文章主要介绍了子元素margin-top导致父元素移动的问题解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天在修改页面样式的时候,遇到子元素设置 margin-top
但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个 margin-top
的效果。
在MDN上面有这么一段文字:
块的上外边距( margin-top
)和下外边距( margin-bottom
)有时合并(折叠)为单个边距,其大小为单个边距的 最大值 ,这种行为称为 边距折叠
。 注意:只有上下边距会产生折叠,左右边距不会产生折叠。
有三种情况会产生边距折叠:
<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; }
例子中,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: 1px solid transparent
)padding: 1px 0
)float
或者定位 position
的方式排列。注意:即使设置父元素的外边距是0, margin: 0
,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
当元素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>
解决方法:
注意事项
参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
到此这篇关于子元素margin-top导致父元素移动的问题解决的文章就介绍到这了,更多相关子元素margin-top导致父元素移动内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的子元素margin-top导致父元素移动的问题解决全部内容,希望文章能够帮你解决子元素margin-top导致父元素移动的问题解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。