margin塌陷和margin重合问题的解决方法总结

原创已于 2022-10-25 23:37:46 修改 · 3.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

于 2022-10-22 00:48:12 首次发布

web 同时被 2 个专栏收录

14 篇文章

订阅专栏

Css

3 篇文章

订阅专栏

本文详细探讨了CSS布局中常见的两种问题：父子元素之间的margin塌陷和兄弟元素之间的margin重叠。通过实例展示了这两种现象，并列举了多种解决方案，包括设置浮动、使用inline-block、绝对定位、overflow隐藏、伪元素以及添加空白元素等方法，旨在帮助开发者更好地理解和解决这些问题。

方法五：给父元素设置overflow: hidden

方法六：为父元素设置一个before伪元素

方法二：给子元素2设置display: inline-block

方法三：在兄弟元素之间添加一个空白div

编辑方法四：给其中一个子元素添加一个父元素，将子元素的margin值修改为父元素的pading值

方法五：给第二个子元素添加一个父元素，并通过BFC解决问题

方法六：父元素设置display：flex

margin塌陷和margin重叠都是垂直方向上的，水平方向没有这些问题。

父子元素之间的margin塌陷问题

现象

<template>
  <div>
    <div class="title-wrap">不设置margin-top值</div>
    <div class="parent-wrap">
      <div class="child-wrap"></div>
    </div>
    <div class="title-wrap">设置margin-top值</div>
    <div class="parent-wrap">
      <div class="child2-wrap" ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.title-wrap {
  width: 300px;
  border: 1px solid gray;
  padding: 5px 0;
}
.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.child-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
}
.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 20px;
}
</style>

不对子元素设置margin-top时，父子元素都和title元素的底部边框线对齐，但是当我对子元素设置margin-top时（本意只想影响子元素），父子元素一起向下移动，都有了一定的间距。这种现象就是margin塌陷。

解决方法：

注意以下解决方法可能会引起副作用，所以在使用时应该根据实际情况进行选择。

方法一：设置子元素浮动元素

.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 20px;
  float: left;
}

方法二：父元素设置浮动元素

<template>
  <div class="container-wrap">
    <div class="parent-wrap">
      <div class="child2-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
}
.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
  float: left;
}

.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 20px;
}
</style>

方法三：父元素设置行内块元素

.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
  display:inline-block;
}

方法四：父元素设置绝对定位

<template>
  <div class="container-wrap">
    <div class="parent-wrap">
      <div class="child2-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
}
.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
  position: absolute;
}

.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 20px;
}
</style>

方法五：给父元素设置overflow: hidden

<template>
  <div class="container-wrap">
    <div class="parent-wrap">
      <div class="child2-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
}
.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 20px;
}
</style>

方法六：为父元素设置一个before伪元素

.parent-wrap::before{
    display: table;
    content: '';
}

方法七：在子元素前添加一个空白元素

<template>
  <div class="container-wrap">
    <div class="parent-wrap">
      <!-- 空白元素 -->
      <div class="space-wrap"></div>
      <div class="child2-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
}
.parent-wrap {
  background-color: aqua;
  width: 100px;
  height: 100px;
}

.child2-wrap {
  width: 50px;
  height: 50px;
  background-color: blueviolet;
  margin-top: 19px;
}
/* 本意设置margin-top是20px，现在通过margin-top的19px和空白元素的height的1px实现20px的空白*/
.space-wrap {
  width: 100%;
  height: 1px;
}
</style>

兄弟元素之间的margin重叠问题

现象

<template>
  <div class="container-wrap">
    <div class="child1-wrap"></div>
    <div class="child2-wrap"></div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
  width: 110px;
  height: 500px;
  border: 1px solid gray;
}
.child1-wrap {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-bottom: 200px;
}
.child2-wrap {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 100px;
}
</style>

给子元素1设置了margin-bottom: 200px，给子元素2设置了margin-top: 100px，按理来说应该两个子元素上下间隔应该是300px，但是实际两个子元素的上下间隔只有200px。

这种兄弟元素垂直外边距重合，选取兄弟元素中设置的margin的最大值的现象就是margin重合。

解决方法：

方法一：给子元素2设置成浮动元素

.child2-wrap {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 100px;
  float: left;
}

方法二：给子元素2设置display: inline-block

.child2-wrap {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 100px;
  display: inline-block;
}

方法三：在兄弟元素之间添加一个空白div

<template>
  <div class="container-wrap">
    <div class="child1-wrap"></div>
    <div class="space-wrap"></div>
    <div class="child2-wrap"></div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
  width: 110px;
  height: 500px;
  border: 1px solid gray;
}
.child1-wrap {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-bottom: 200px;
}
.child2-wrap {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 99px;
}

.space-wrap {
  width: 100%;
  height: 1px;
}
</style>

方法四：给其中一个子元素添加一个父元素，将子元素的margin值修改为父元素的pading值

<template>
  <div class="container-wrap">
    <div class="child1-wrap"></div>
    <div class="parent2-wrap">
      <div class="child2-wrap"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MarginDemo",
};
</script>
<style scoped>
.container-wrap {
  margin-left: 10px;
  width: 110px;
  height: 500px;
  border: 1px solid gray;
}
.child1-wrap {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-bottom: 200px;
}
.parent2-wrap {
  padding-top: 100px;
}
.child2-wrap {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>

方法五：给第二个子元素添加一个父元素，并通过BFC解决问题

给第二个子元素的父元素添加以下属性都可以解决问题：

1、 float: left;

2、 display: inline-block;

3、 overflow: hidden;

4、position: absolute;

方法六：父元素设置display：flex

.container-wrap {
  margin-left: 10px;
  width: 110px;
  height: 500px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}