Margin Collapse 마진 병합

Margin Collapse 마진 병합

margin은 상하간 둘 이상의 요소의 margin 값이 둘 중 더 큰 margin 값으로 합쳐지는 현상

유형

동등한 두 요소의 인접한 두 마진

• 위 요소의 하단 margin과 아래 요소의 상단 margin의 병합이 일어난다.
• 최종 마진 결정 방식
  • 양수값, 양수값
    • 더 큰 값 즉, 절댓값이 가장 큰 값으로 합쳐진다.
  • 음수값, 음수값
    • 더 작은 값 즉, 절댓값이 가장 큰 값으로 합쳐진다.
  • 양수값, 음수값
    • 제일 큰 양수 값과 제일 작은(절대값이 제일 큰) 음수 값의 합

부모 요소와 자식 요소의 같은 방향의 두 마진

• 부모 요소의 패딩이 아니라 마진인 것에 주의하자
• 최종 마진 계산법
  • 자식 요소의 마진이 더 크든 작든 상관없이 부모 박스의 바깥 마진으로 최종적으로 적용된다

예외 상황

• 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다
• 두 박스가 block-level 요소가 아닐때
  • inline, inline-block, table-cell, table-caption 등의 요소에서는 일어나지 않는다
• padding과 border가 있을 때
  • margin collapse가 발생하기 위해서는 둘 사이에 아무것도(border, padding 포함) 없어야 한다.
• 플로팅 요소와 절대 위치를 지정한 요소

해결법

동등한 두 요소의 인접한 마진

• display: block 대신 flex 이용
• display: block 대신 inline-block 이용
• 애초에 margin 보다는 padding 을 이용

부모요소와 자식요소의 같은 방향의 두 마진

• display: block 대신 flex 이용
• parent 요소에 padding 속성 주기
• parent 요소에 overflow: hidden;
  • 새로운 block format context가 .parent요소 기준에서 만들어지면서 .parent의 마진과 .child의 마진은 별개가 되고, 안에 있는 child요소의 마진이 부모요소의 안에서 새로 시작할 수 있다

references

• https://velog.io/@raram2/CSS-마진-상쇄Margin-collapsing-원리-완벽-이해