margin collapsing 이라고 부르는 마진 상쇄는 두 개 이상의 블록 요소의 상하 마진이 겹치게 될 경우 두 값을 더한만큼 렌더링해주는 것이 아닌 둘 중 하나의 값만 적용하여 렌더링해주는 브라우저의 규칙이다.
마진상쇄가 일어나는 3가지 경우
1. 인접 형제 박스 간에 상하 마진이 겹칠 경우
2. 빈 요소의 상하 마진이 겹치는 경우
3. 부모 작스와 첫번째 자식 박스의 마진이 겹치는 경우
CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
마진 상쇄는 흔히 '마진 겹침 현상'이라고도 불립니다. (혹자는 '마진 빡침 현상'이라고도 합니다) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상
velog.io
댓글