[css] float를 적용하면 위 여백이 늘어나는 이유 – 마진 컬랩스

css 프라퍼티인 float는 그 피상적인 내용은 간단하지만 막상 다루기에는 까다롭다. 그 주된 기능은 가로로 한 줄을 다 차지하여 위아래로만 쌓듯 배열을 할 수 있는 블록-레벨 콘텐트를 옆으로 나란히 두게 하는 거다. 하지만 작동하는 원리가 복잡하여 그냥 대충 이용하다간 레이아웃이 금새 엉망진창이 된다.

아래 두 코드의 실행 결과는 다르다.

<!DOCTYPE html>
<p>test paragraph</p>
<!DOCTYPE html>
<p style="float: left">test paragraph</p>

어차피 패러그래프 하나만 있으니 플로우트 처리를 하든 말든 달라질 건 없으리라는 게 당연한 생각이다. 하지만 플로우트에는 마진 컬랩스를 없애는 기능이 있어서 위 코드들은 서로 다른 출력을 하게 된다.

<body>는 따로 설정을 하지 않아도 8px의 여백을 갖는다. <p>는 1em 즉 16px의 여백을 갖는다. 이들은 충돌하여 더 큰 값 하나로 통일된다. 이게 margin collapse다. 따라서 첫 번째 예제의 예문은 위가 16px만큼 떨어져서 나온다.

플로우트는 컬랩스된 마진을 다시 살리기 때문에 바디의 여백과 패러그래프의 그것 모두 작용하여 둘째 예제의 예문은 위가 24px 그러니까 조금 더 아래에서 출력된다.