마진 겹침 현상(margin collapsing)

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing

https://youtu.be/c19Mjg-ivxc?si=kzFGncB5IBQzRxKi

https://velog.io/@devsaza/likealion006

https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin

 

 

마진 겹침 현상(마진 상쇄 현상)

 

여러 블록의 margin 상하 값이 경우에 따라 제일 큰 margin 값을 가진 단일 margin으로 결합(상쇄)되는 현상 (단, float 속성값을 줬거나 position 속성 값이 절대요소(absolute, fixed, sticky...)

즉 인접한 요소 간의 위아래 margin이 겹칠 때, 큰 쪽의 값만 적용하는 현상이다.

 

마진 상쇄는 다음 상황에서 발생한다.

 

1. 인접 형제 요소간 바깥 여백

 

html, css 코드

html

<div class="m-c-container">
  <div class="item">
    <h3>인접 형제 요소</h3>
    <p>
      박스들에게 margin : 30px의 속성을 줬으나, 박스1의 margin-bottom :
      30px와 박스2의 margin-top : 30px이 겹쳐 두 박스 간의 간격이 60px가
      아닌 30px로 겹침현상이 일어남.
    </p>
    <div class="parent">
      <div class="child">박스1</div>
      <div class="child">박스2</div>
    </div>
  </div>
  <div class="item">
    <h3>해결방안</h3>
    <p>형제 요소들에게 display : inline-block 속성을 준다.</p>
    <div class="parent">
      <div class="child brother-box">박스1</div>
      <div class="child brother-box">박스2</div>
    </div>
  </div>
</div>

 

css

  .m-c-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: 2px solid #333;
    padding: 20px;
    margin-bottom : 20px;
  }

  .item {
    width: 45%;
  }
  
/* 인접 형제 요소 */
  .parent {
    width: 200px;
    border: 1px solid black;
    background-color: #77b11a;
    margin: auto;
  }
  .child {
    border: 1px solid black;
    background-color: #3a5e00;
    color: white;
    padding: 20px;
    margin: 30px;
  }
  .brother-box {
    display: inline-block;
  }

  @media screen and (max-width: 767px) {
    .item {
      width: 100%;
    }
  }

 

margin-collapsing

인접 형제 요소

박스들에게 margin : 30px의 속성을 줬으나, 박스1의 margin-bottom : 30px와 박스2의 margin-top : 30px이 겹쳐 두 박스 간의 간격이 60px가 아닌 30px로 겹침현상이 일어남.

박스1

박스2

해결방안

형제 요소들에게 display : inline-block 속성을 준다.

박스1

박스2

 

 

 

2. 부모와 자손을 분리하는 콘텐츠가 없거나 빈 공간임

 

html, css 코드

html (이번엔 각 해결방안마다 태그에 직접적으로 style 속성을 부여했다.)

    <div class="m-c-container">
      <div class="item">
        <h3>부모 자식 요소</h3>
        <p>
          자식에게 margin : 30px이 주어져있지만, 부모 요소의 높이에 영향을 주지 않은 상태로 넘어서고 있다. 즉 자식의 margin은 부모 margin에 흡수된 것.
        </p>
        <div class="parent">
          <div class="child">박스1</div>
          <div class="child">박스2</div>
        </div>
      </div>
      <div class="item">
        <h3>해결방안 1)</h3>
        <p>부모에 overflow : hidden; 속성을 부여</p>
        <div class="parent" style="overflow: hidden;">
          <div class="child brother-box">박스1</div>
          <div class="child brother-box">박스2</div>
        </div>
      </div>
      <div class="item">
        <h3>해결방안 2)</h3>
        <p>컨텐츠 추가 (자식 형제요소간 마진겹침현상도 없어짐)</p>
        <div class="parent" style="overflow: hidden;">부모님
          <div class="child brother-box">박스1</div>자식
          <div class="child brother-box">박스2</div>
        </div>
      </div>
      <div class="item">
        <h3>해결방안 3)</h3>
        <p>부모에 border 속성을 부여</p>
        <div class="parent" style="border : 5px solid red;">
          <div class="child brother-box">박스1</div>
          <div class="child brother-box">박스2</div>
        </div>
      </div>
      <div class="item">
        <h3>해결방안 4)</h3>
        <p>부모에 padding 속성을 부여</p>
        <div class="parent" style="padding : 10px;">
          <div class="child brother-box">박스1</div>
          <div class="child brother-box">박스2</div>
        </div>
      </div>
    </div>

 

css

      .m-c-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        border: 2px solid #333;
        padding: 20px;
        margin-bottom : 20px;
      }

      .item {
        width: 45%;
      }

      .parent {
        width: 200px;
        background-color: #77b11a;
      }
      .child {
        border: 1px solid black;
        background-color: #3a5e00;
        color: white;
        padding: 20px;
        margin: 30px;
      }


      @media screen and (max-width: 767px) {
        .item {
          width: 100%;
        }
      }

 

margin-collapsing

부모 자식 요소

자식에게 margin : 30px이 주어져있지만, 부모 요소의 높이에 영향을 주지 않은 상태로 넘어서고 있다. 즉 자식의 margin은 부모 margin에 흡수된 것.

박스1

박스2

해결방안 1)

부모에 overflow : hidden; 속성을 부여

박스1

박스2

해결방안 2)

컨텐츠 추가 (자식 형제요소간 마진겹침현상도 없어짐)

부모님

박스1

자식

박스2

해결방안 3)

부모에 border 속성을 부여

박스1

박스2

해결방안 4)

부모에 padding 속성을 부여

박스1

박스2

 

이 외에도 가상요소 (::before)를 활용하는 등의 여러가지 해결방안이 있다.