margin collapse 관련 레퍼런스 해석 (마진 병합)

같이 공부하는 동기가 W3C 레퍼런스를 공부하다가 해석이 난해한 부분이 있어서, 같이 자료를 찾아보게 됐습니다. 레퍼런스 내용은 다음과 같습니다.

 

If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
-W3C Reference

위 예제에서 clearance라는 단어가 나오는데, clear 속성이 none이 아닐 때 생기는 요소간의 간격을 말합니다.

 

저희가 헷갈려했던 부분은 margin-top과 margin-bottom이 인접하다는 부분입니다. 만약 브라우저에 네모 상자가 렌더링된다고 생각해보면, 각각 위와 아래에 위치한 두 개의 상자를 그려봅니다. 이때 위에 위치한 상자의 margin-bottom과 아래에 위치한 상자의 margin-top이 만났을 때 인접하다고 생각했습니다.

 

그런데 자료를 찾아본 결과, margin-top과 margin-bottom이 인접하다는 뜻은 하나의 요소가 있고, 그 요소의 높이가 0일 때, 그 요소의 margin-top과 margin-bottom이 가까워지는 것을 인접하다라고 뜻한 것이었습니다.

 

See the Pen clearance by 석금용 (@gmyong) on CodePen.

 

위 예제에서 floating 요소에 float 속성을 적용하였습니다. 그리고 clearing 요소에 clear 속성을 적용하면서 clearance 환경을 만들어 주었습니다. 이때 clearing 요소의 높이는 0이기 때문에 margin-top과 margin-bottom이 인접하게 되고, 병합되어 둘의 차이값만큼의 공간이 생깁니다. 그리고 레퍼런스의 내용대로 병합의 결과로 생긴 공간과 그 뒤에 오는 following 요소의 maring-top과도 병합이 이루어지면서 둘의 margin의 값 중 큰 값만큼 공간이 생깁니다.

 

그리고 그렇게 생긴 margin은 부모의 margin-bottom과는 병합되지 않는데, 위 예제에서 container 요소(빨간색 박스)의 margin-bottom과 병합되지 않은 것을 볼 수 있습니다.