[CS]エッジオーバーラップ(エッジ折りたたみ)

7071 ワード

利益の重複現象とは何ですか。

隣接するブロック要素の上下端の毛利オーバーラップ現象.
境界の大きさは、隣接する境界においてより大きな値を有する境界値が重畳される.

1.ブロック要素の上下の境界が重なる

要素と要素の間にmargin-topまたはmargin-bottomの空間がある場合、より高い値が適用されます.

▆▆▆▆▆30px+60px=90px▆より高いマージン値60 pxにのみ適用されます.

<body>
  <div class="first"></div>
  <div class="second"></div>
</body>

<style>
  div {
    width: 50px;
    height: 50px;
  }
  .first {
    margin-bottom: 30px; 
    background-color: red;
  }
  .second {
    margin-top: 60px;
    background-color: green;
  }
</style>

2.親子間の利益が重なる

親要素と子要素が存在する場合、子要素のmargin-topまたはmargin-bottomの値は親要素の高さに影響しません.

<body>
  <div class="parent">
     <div class="child"></div>
  </div>
</body>

<style>
  .parent {
    background-color:yellow;
  }
  .child {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color:red;
  }
</style>