[CSS] 레이아웃을 깨뜨리는 마진병합 현상

- 2개의 박스가 있다.

첫 번째 박스는 margin이 위,아래로 20px

두 번째 박스는 margin이 위, 아래로 40px

 

 

See the Pen Untitled by tangjinlog (@tangjinlog) on CodePen.

 

분명 첫 번째 박스와 두 번째 박스 사이에는 총 margin이 60px 존재하지만,

개발자 도구로 확인시 40px로 설정된다. 

 

즉, 좀 더 큰쪽의 margin값으로 설정된다. 이와 같은 현상이 '마진 병합'현상이다.

 

▶ 마진 병합 현상이 발생하는 경우

 

1. 형제 요소끼리

- 블럭요소끼리 인접해 있을 때, margin-top, margin-bottom이 겹칠 경우

 

2. 부모 자식요소끼리

- 부모 태그안의 자식요소가 margin 설정시 부모도 함께 적용됨.

-> 자식요소에 position: absolute;를 줘서 해결 가능.