CSS 마진 상쇄(Margin-collapsing)

두개 이상의 블록 요소의 상하 마진이 겹칠때 어느 한쪽으로만 적용되는

브라우져 렌더링 규칙.

 

※ 렌더링이란 ?

마크업 언어가 가지는 특성으로, 작성된 마크업 언어를 엔진이 해석해서

사람의 눈으로 볼 수 있도록 만들어주는 과정

 

출처 :

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

 

마진 겹침현상이라고 예전에 어느 블로그에서 HTML을 공부할 때 배웠는데

예를 들어 두개의 블록 요소가 있을 때 마진이 겹치게 되면 한 마진값이 사라지게 되는 것이니

상쇄라고 이해하는게 더 좋을 것 같기도 하다.

 

전부 이해하지는 못했지만 일단은 더 큰 값으로 마진이 상쇄되며,

패딩과 보더를 통해 벽을 쳐서 본래 의도한 대로 마진을 보이게 할 수 있다는 사실은

기억해두려고 한다.