[CSS] 마진 겹침 현상 (margin collapsing)

7303 단어 CSS멋쟁이사자처럼CSS

마진 겹침 현상이란?

인접하는 block 요소의 상하단의 마진이 겹치는(병합되는) 현상을 말한다.
마진의 크기는 인접한 마진 중에서 더 큰 값을 가진 마진의 값으로 겹친다.

1. 블록 요소의 상하단 마진 겹침

요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상

✏️ margin 30px + 60px = 90px가 적용될 것 같지만? 더 높은 margin 값 60px만 적용된다.

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

위 코드처럼 작성하면 이런 결과가 나올거 같지만!

✏️ child 요소의 마진 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있다.
부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정된다. 하지만 위와 같은 경우 자식의 margin-top, margin-bottom 값이 부모의 높이에 영향을 미치지 않게 된다.

이와 같은 현상을 해결하는 방법은?

  1. 부모 요소에 border: 1px solid black 값을 적용
    하지만 어쨌든 1px의 공간을 차지하므로 오차가 발생한다. 좋은 방법은 아니다.
  2. 부모 요소에 display: inline-block 값을 적용
    자식 요소들의 형제간 마진 겹침이 제거된다. 첫번째 자식 요소를 뺀 나머지 자식 요소들에게 margin-top:0을 적용해야 한다.
  3. 부모 요소에 overflow: hidden 속성 값을 적용


#참고 https://www.joshwcomeau.com/css/rules-of-margin-collapse/

객체지향언어 생성자
기타 자료 구조 : Linked-list (연결 리스트)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage