[CSS] 마진상쇄 개념 알기

마진상쇄란?

두개 이상 블럭요소의 마진이 겹쳤을때 한쪽의 마진값만 적용되는것.

(좌우 마진은 겹치지 않음)

 

🙌문제점

부모 영역에 마진을 주었을 경우 부모영역을 벗어나 하단마진이 먹지 않는 현상 발생

 

왜 그러는지 찾아보다가 아래의 참고자료를 찾아보게 됨.

3-2. 부모 박스와 마지막 자식 박스의 하단 마진이 나란히 겹칠 때의 상황이었다.

🙌해결방안

부모박스에 padding 또는 border 값을 지정해 벽을 만들어주어야 한다.

부모에 border를 지정해주었을 때 자식박스에 margin-bottom 지정이 가능했다.

 

---

마진 상쇄 규칙 적용

• 마진 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용됩니다.
  (inline, inline-block, table-cell, table-caption 등의 요소는 block-level이 아닙니다.)
• 마진 값이 0이더라도 상쇄 규칙은 적용됩니다.
• 좌우 마진은 겹치더라도 상쇄되지 않습니다.

마진 상쇄 규칙 예외

다음과 같은 상황에서는 인접 요소 간 마진 상쇄가 일어나지 않습니다.

• 박스가 position: absolute 된 상태
• 박스가 float: left/right 된 상태 (단, clear 되지 않은 상태)
• 박스가 display: flex 일 때 내부 flexbox item
• 박스가 display: grid 일 때 내부 grid item

-참고자료 css 마진상쇄 원리 완벽이해 발췌-

 

---

참고자료

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해