マージン崩壊とマージン重複の問題の解決策のまとめ

<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 を設定すると（本来の目的は子要素に影響を与える)、親要素と子要素は一緒に一定の距離を下に移動します。この現象がマージン崩壊です。

解決：

なお、以下の解決策は副作用を引き起こす可能性がありますので、使用する際は状況に応じて選択してください。

方法 1: 子要素を float に設定する

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

方法 2: 親要素にフローティング要素を設定する

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

方法 3: インラインブロック要素を親要素に設定する

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

方法 4: 親要素に絶対位置を設定する

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

方法 5: 親要素に 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>

方法 6: 親要素に before 疑似要素を設定する

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

方法 7: 子要素の前に空白要素を追加する

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

兄弟要素間のマージンの重複の問題

現象

<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 が設定されます。論理的に言えば、2 つの子要素間の上下の間隔は 300px であるはずですが、実際の上下の間隔は 300px です。 2 つの子要素はわずか 200 ピクセルです。

兄弟要素の縦方向のマージンが重なり、兄弟要素に設定されているマージンの最大値が選択される現象がマージンオーバーラップです。

解決：

方法 1: 子要素 2 をフローティング要素として設定する

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

方法2: 子要素2にdisplay: inline-blockを設定する

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

方法 3: 兄弟要素の間に空の 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>

方法 4: 子要素の 1 つに親要素を追加し、子要素のマージン値を親要素のパディング値に変更する

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

方法 5: 2 番目の子要素に親要素を追加し、BFC を通じて問題を解決する

次の属性を 2 番目の子要素の親要素に追加すると、問題を解決できます。

1、フロート: 左;

2、表示: インラインブロック;

3、オーバーフロー: 非表示;

4、位置: 絶対;

方法 6: 表示を設定する: 親要素のフレックス

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