[html, css] margin 영역끼리 겹치는 마진 상쇄 해결

html 구조가 복잡해지다보면 marin 영역끼리 겹치는 마진 상쇄 현상과 심심찮게 마주한다.

 

마진 상쇄가 발생하는 경우는 대략 다음과 같다.

1. 형제 노드끼리 맞닿는 영역에 각자 마진영역이 설정되어있을 경우 (더 넓은 쪽이 작은 쪽을 상쇄한다.)

2. 부모 요소의 상단 마진 과 자식 요소의 상단 마진이 맞닿았을 경우 (부모 요소의 마진만 적용되고, 자식 요소의 마진은 상쇄된다.) - 개인적으로 가장 짜증난다.

 

chat-gpt한테 물어보면 몇가지 경우 더 있지만, 난 주로 위 두 가지 경우를 많이 마주쳤다. 짜증나긴 하지만 오류는 아니라고 하고, 브라우저가 레이아웃을 더 깔끔하게 관리하기 위한 규칙이라는 모양이다.

 

마진 상쇄는 블록 요소에서만 발생하기 때문에, 요소를 인라인 속성(inline, inline-block, inline-flex 등등)으로 변경해주면 무난하게 이슈가 해결된다. 실제로 나도 해당 방법으로 마진 상쇄를 항상 해결해왔다.

 

구글링 해보거나 chat-gpt한테 물어보면 border를 추가하라는 둥, 패딩을 추가하라는 둥 안내하지만 이 방법들로는 해결된 적이 없다... 

 

END.