Summary of solutions to the problem of margin collapse and margin overlap

<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>

When I do not set margin-top on the child element, the parent and child elements are aligned with the bottom border line of the title element. However, when I set margin-top on the child element (the original intention is to only affect the child element), the parent and child elements move downward together, and both a certain distance. This phenomenon is margin collapse.

Solution:

Note that the following solutions may cause side effects, so you should choose according to the actual situation when using them.

Method 1: Set the child element to float

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

Method 2: Set the floating element on the parent element

<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>

Method 3: Set the inline block element to the parent element

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

Method 4: Set absolute positioning on the parent element

<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>

Method 5: Set overflow: hidden to the parent element

<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>

Method 6: Set a before pseudo-element for the parent element

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

Method 7: Add a blank element before the child element

<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 overlap problem between sibling elements

Phenomenon

<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>

Margin-bottom: 200px is set for child element 1, and margin-top: 100px is set for child element 2. Logically speaking, the upper and lower intervals between the two child elements should be 300px, but the actual upper and lower intervals between the two child elements are only 200px.

The vertical margins of sibling elements overlap, and the maximum value of the margin set in the sibling elements is selected. This phenomenon is margin overlap.

Solution:

Method 1: Set child element 2 as a floating element

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

Method 2: Set display: inline-block for child element 2

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

Method 3: Add a blank div between sibling elements

<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>

Method 4: Add a parent element to one of the child elements, and change the margin value of the child element to the padding value of the parent element

<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>

Method 5: Add a parent element to the second child element and solve the problem through BFC

Adding the following attributes to the parent element of the second child element can solve the problem:

1、 float: left;

2、 display: inline-block;

3、 overflow: hidden;

4、position: absolute;

Method 6: Set display: flex on the parent element

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