关于javascript:子元素margintop导致父元素移动的问题

问题形容

明天在批改页面款式的时候，遇到子元素设置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…

原文首发地址：https://github.com/Daotin/fe-…

你也能够从上面中央找到我：

• Github 个人主页
• 公众号：前端队长