margin 병합

[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 설정시 부모도 함께 적용됨. -> 자식요소에 p..