CSS 마진 상쇄(margin collapsing)

YongWan·2023년 6월 12일
post-thumbnail

여러 block요소들의 위/아래 margin이 경우에 따라 더 큰 크기를 가진 margin으로 결합(상쇄)되는 현상.

case

1. 인접 형제

  • 두 형제 요소의 위/아래 여백이 만날 경우

2. 부모-자식요소 간

  • 부모 블럭에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
  • 부모 블럭에 border, padding, inline content가 없고, 부모-자식을 분리할 height값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우

3. 빈 블럭

  • border, padding, content가 없고, height 또한 존재하지 않아 해당 블럭의 margin-top과 margin-bottom이 만나는 경우

0개의 댓글