당신이 몰랐던 마진 상쇄(겹침)현상의 이유

들어가며

종종 블록 요소나 빈 요소의 마진이 겹쳐진 것처럼 사라지는 경우가 생긴다. 이는 마진 상쇄(margin collapsing)이라 부르는 현상으로, 가장 큰 한 가지 마진 값으로 합쳐지는 현상이다. W3C의 CSS 스펙를 찾아봐도 왜 이런 현상을 규정했는지에 대해 명확한 이유가 나타나지는 않는다. 그리고 대부분의 한국어 문서에서 마진 상쇄가 어떤 경우에 일어나는지와 해결책만이 적혀 있기에 "왜 마진 상쇄를 규정했는지"에 대한 궁금증을 해소하기에는 부족했다. 그러던 중 stackoverflow에서 이를 잘 설명 해준 멋진 글을 하나 발견했다.

HTML과 CSS

HTML은 Hyper Text Markup Language다. 그리고 기본적으로 HTML을 통해 만드는 것은 '문서'다. 지금은 게임을 비롯하여 애플리케이션이라고 할 수 있지만, 근본적으로 HTML은 문서 마크업 언어다. HTML과 CSS는 애플리케이션을 만들기 위한 규격이 아닌, '문서'를 작성하기 위한 도구다. 우리가 보는 각종 웹 페이지들은 '화려한 문서'인 셈이다.

 

10px의 빈 공간이 필요하다.

마진에 대해 어떠한 요소를 10px로 이동하는 것이 아니라, 해당 요소에 10px의 빈 공간이 있어야 하는 것이라고 생각한다면 이해가 쉽다. 문서 작성 시를 생각해보면 이해가 더 쉽다. 위 stackoverflow의 한 사용자가 단 댓글을 인용해봤다.

CSS 외부에서도 동일한 논리가 적용됩니다. 예를 들어 Microsoft Word에서 제목 뒤에 12px, 단락 앞에 6px의 여백이 있는 경우에, 단락이 제목 뒤에 오는 경우에는 18px가 아니라 12px 공간이 생깁니다.
Arseni Mourzenko, Aug 22, 2010 at 19:26에 작성. 위 문장은 cc by-sa 의해 라이선스 됨
원문 : https://bit.ly/3vyBQSb​​

위에서 말한 HTML과 CSS를 통해 만드는 것은 '문서'라는 것을 생각해보면, 마진 상쇄 현상은 매우 자연스러운 것이었다는 것을 알 수 있다.

 

사실, 문제는 HTML과 CSS가 아니라...

문서 작성 도구로 애플리케이션을 만들려고 해서 생기는 문제가 아닐까 싶기도 하다. 소 잡는 데 닭 잡는 칼을 쓰기 때문에 생기는 문제인 것 같다. 만약 '화면을 그리는 것'을 위한 언어와 스펙이었다면, 이러한 불편한 규정이 없었을 것이다.

먼 미래에는 문서 작성이 아닌 화면 랜더링이 목적인 언어들이 생기지 않을까 싶지만, 그것을 웹이라고 부를 수 있을지는 잘 모르겠다.

요약

1. 마진 상쇄는 HTML과 CSS가 '문서'를 위한 것이기 때문이다.

2. (블럭 요소에 한정하여) margin을 적어도 n픽셀의 빈 공간이 있어야 한다고 생각한다면, 마진 상쇄 현상을 이해하기 쉽다.