网页制作 
首页 > 网页制作 > 浏览文章

子元素margin-top导致父元素移动的问题解决

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

问题描述

今天在修改页面样式的时候,遇到子元素设置 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。

子元素margin-top导致父元素移动的问题解决

解决办法:

第二个元素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>

子元素margin-top导致父元素移动的问题解决

解决办法:

  • 父元素创建块级格式上下文( 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>

子元素margin-top导致父元素移动的问题解决

解决方法:

  • 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

上一篇:css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
下一篇:纯CSS3实现运行时钟的示例代码
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap