웹페이지를 작성할 때 별다른 설정을 주지않았다면 작성한 요소들은 위에서 아래로 쌓여서 보여집니다.
이 요소들을 분리하기 위해 각 요소에 margin이라는 속성을 주어 요소 간에 거리를 둡니다.
수평일때는 문제가 되지 않습니다. 하지만 요소가 위아래, 수직관계일 때 때때로 원하는 만큼 margin값이 적용되지 않는 현상을 목격할 수 있습니다.
div태그 두 개가 있다고 가정합니다. 상단에 위치한 요소에 above 클래스를, 하단에 위치한 요소에 bottom클래스를 할당해주었습니다.
.above {
margin: 30px 0;
}
.bottom {
margin: 20px 0;
}
위의 요소에는 30px의 margin 값을, 아래의 요소에는 20px의 margin값을 할당해주었습니다. 그렇다면 우리는 총 50px의 간격이 만들어지리라 예상해볼 수 있습니다.
하지만 위의 결과로 우리가 보게되는 간격 값은 30px입니다.
왜 이런 결과가 나오게 된걸까요?
답은 margin collapse입니다.
margin collapse. margin 상쇄, margin 붕괴. 두 개의 margin값이 하나로 합쳐지는 현상을 일컫습니다.
Thetopandbottommargins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known asmargin collapsing.
mdn 문서에서는 이 현상을 이렇게 설명합니다. 즉, 두 개의 margin 값중에서수치가 더 큰 margin값 하나만이 적용되는 현상입니다.
단, 요소의position 속성이 floating이거나 absolute라면, margin collapsing은나타나지 않습니다.
더 자세한 원인을 알아보면
예를 들어
<p> 바로 뒤의 태그도 패러그래프 태그이기 때문에 </p>
<p>margin collapsing이 일어납니다</p>
위의 태그에서 margin값을 적용하게 되면 margin collapse가 일어납니다.
하지만,
<p> 바로 뒤의 태그가 디비젼 태그이기 때문에 </p>
<div>margin collapsing은 일어나지 않습니다</div>
<p>와 <div>는 다른 태그이기 때문에 margin collapsing은 일어나지 않게 됩니다.
<div style="margin: 10px 0">
<div style="margin: 20px 0"></div>
</div>
위의 태그를 브라우저에서 시각화한다면
자식의 margin이 부모의 margin을 상쇄시킨 것을 알 수 있습니다.
이는 부모태그의 first child와 last child에서만 그 현상이 나타나는데요.
부모와 자식을 분리하는 별도의 속성 (padding, border 등)이 없다면 margin collapsing이 일어납니다.
margin collapsing test
위 html코드는 1번과 2번의 경우를 벗어납니다. 그렇다면 margin collapsing이 일어나지 않을 것 같기도 합니다. 하지만 margin collapsing이 일어나는 마지막 경우가 남아있습니다.
div태그를 자식 요소가 없고, border, padding, height(또는 min-heihgt) 값이 적용되지 않은 태그라고 가정합시다.
그렇게 가정했을 때, div태그는 내용이 빈(empty)것으로 간주되어 margin collapsing이 일어납니다.
이로써 margin collapsing의 정의와 일어나는 케이스에 대해서 알아보았습니다. margin collapsing을 이해한다면, 디자인 시안을 브라우저로 옮기는 작업이 좀 더 수월해질 것입니다. 이 원리를 이해한다면, html문서를 작성할 때, padding과 margin 어느 것을 사용해야하는지 올바른 결정을 내릴 수 있습니다.
이상으로 margin collapsing에 대한 포스팅을 마칩니다.