CSS 개발자라면 마진 병합(Margin Collapse)에 대해 아실 겁니다. 좀 명확한 규칙을 찾아 봤는데요. 경험적으로 알던 것이지만 정리해 보니 재밌네요.
border, padding, inline 콘텐츠 없는 빈 블록 자신의 상하 마진이 병합되는 것도 이 규칙이었군요.
규칙
블록의 위아래 여백은 각 여백중 더 큰 것으로 결합(병합)됩니다. 이를 마진 병합(Margin Collapsing)이라고 합니다. float되거나 absolute로 배치된 요소의 마진은 절대 병합되지 않습니다.
참고: Mastering margin collapsing(MDN)
위아래 마진은 병합된다
👇뒤의 요소가 float 요소 뒤에서 clear 속성을 사용하지 않은 경우
👇뒤의 요소가 float 요소 뒤에서 clear 속성을 사용한 경우는 예외
👇뒤의 요소가 float 요소 뒤에서 clear 속성을 사용 안 한 경우는 마진 병합이 작동
특정 조건에서 부모 자식간 마진은 병합된다
👇자식의 margin-top에서 부모의 margin-top을 분리할 요소가 부모에 없는 경우(border, padding, inline 부분, 블록 형식 맥락이나 clear)
이 아래는 자식 마진이 적용돼 마진이 50px 있다
👇자식의 margin-top에서 부모의 margin-top을 분리할 border가 부모에 있는 경우
👇부모에 자식의 margin-bottom을 분리할 border, padding, inline 내용, 높이(height, min-height)가 없는 경우
이 위로는 자식 마진이 적용돼 마진이 50px 있다
👇부모에 자식의 margin-bottom을 분리할 height가 있는 경우
이 위로는 자식 마진이 작동하지 않아 딱 붙는다.
border, padding, inline 내용, 높이(height, min-height)가 없는 빈 블록의 상하 마진은 스스로 병합된다
블록 위 (위아래 간격은 30px, 블록에는 margin-top: 30px; margin-bottom: 20px 설정)
블록 아래
좌우 마진은 병합되지 않는다
👉 코드펜에서 보기
댓글 남기기