CSS - 마진 병합 현상

두개의 섹션이 있는데 마진과 패딩 모두 20px을 줬는데 40px이 띄워지는게 아니고 20px만 띄워 졌다. 이게 마진 병합 현상이다. 이러한 마진 병합 현상은 의도된 css 현상이다. 

 

마진 병합 현상의 조건1. 인접해 있는 블럭 요소 끼리만2. 상 하단만 마진 병합 현상이 일어남!

 

부모 안에 두개의 child가 있는데 위와 같이 자식1과 자식2의 상하단 마진이 겹치는 현상을 볼 수 있음.

 

 

부모에는 상하 마진이0 이고 자식의 상하 마진은 20px인 경우에도 마진 겹침 현상이 일어난다.

부모 블록 - 자식 블록 사이의 관계도 블록의 관계이기 때문에, 상하 마진에 대해서 겹침 현상이 일어나는 것이다.

원래 우리의 상식대로라면 child의 상하좌우 마진이 20px씩 들어가야 하므로 A의윗부분과 B의 아랫부분도 20px만큼 떨어져야 정상일것이다.

 

근데 자식 블록이 부모 블록에 딱 붙은 모습을 볼 수 있다.

 

위에보면 파란색으로 연하게 쳐진 부분이 A의 위쪽 마진과 부모의 위쪽 마진이 겹친 상황이다.

부모블록과 자식블록 사이에 아무것도 없이 딱 붙어 있기 때문에 위와 같은 현상이 발생한 것인데, 

이와 같이 부모 자식 블록 사이에 의미없는 텍스트를 넣거나, 부모에 transparent한 보더를 주거나

부모에 padding을 주거나

부모에 overflow:hidden을 주는 방식으로 해결 할 수 있다.

 

가장 마지막 방법인 overflow:hidden방식이 제일 추천되는 방식이다.

 

 

 

 

출처 : https://programmers.co.kr/learn/courses/4521/lessons/14639#