박스모델은 CSS를 받들고 있는 주춧돌의 하나로, 한 요소가 어떤 영역에 어떻게 표시되고 다른 요소를 만났을 때 어떻게 되어야 하는지를 규정하게 됩니다.

패딩(padding) : 내용 영역 주의를 둘러싸며, 패딩 영역을 합친 영역에 배경이 지정됩니다. 테두리선을 추가하면 패딩 영역 바깥에 적용됩니다.

마진(margin) : 테두리선 바깥쪽에 지정되는것이 마진입니다. 마진은 투명하고 모양이 없습니다.

윈도우용 인터넷 익스플로러의 박스 모델

익스플로러 브라우저에서는 width속성을 계산할때 단지 내용 영역의 너비를 계산하지 않고 내용, 패딩, 테두리선의 너비를 모두 합한 값을 너비로 계산합니다. 아래 그림과 같이 내용 영역 너비인 40px 안에 패딩값을 포함합니다.

마진 겹침 현상

마진 겹침 현상은 알고보면 단순한 개념이지만 실전에서 웹페이지 레이아웃을 잡을 때 수많은 혼란을 일으킵니다.

간단하게 설명하자면 두 개 이상의 마진값이 세로 방향으로 만났을 때 하나의 마진으로 합쳐지는 현상을 말합니다. 마진이 하나로 합칠 때 두 개의 마진값 중에서 큰 값이 이 마진의 높이값이 됩니다.

두 개의 요소가 위 아래에 자리잡고 있을 때, 두 번째 요소의 상단 마진값은 첫 번째 요소의 하단 마진값 아래로 접혀들어가는 현상이 나타납니다.

이런 방식을 처음 접하면 생소하게 느껴지지만 사실 이는 매우 합리적인 방식으라고 할수 있습니다. 여러 개의 문단을 포함하고 있는 전형적인 웹 페이지의 경우를 한번 예로 들어 보겠습니다.

마진 겹침을 하지 않는다면 첫번째 문단의 상간 마진은 제대로 표시되지만 그 다음부터는 하단 마진과 이어지는 문단의 상단 마진을 합한 높이가 됩니다. 즉 문단 간격의 높이가 첫 번째 문단의 높이에 비해 두 배가 되겠죠. 마진 겹침 방식때문에 각 문단의 상간 마진과 하단 마진이 겹치게 되어 모든 간격이 동일하게 유지되는 효과를 얻게 되는 것입니다.

* 마진 겹침 현상은 일반적인 문서 흐름 상태에서 블록 레벨 박스에 지정된 세로 방향의 마진에서만 적용됩니다. 즉 인라인 레벨의 박스나

플로팅(float)이 지정된 문서 흐름 상태거나 절대 위치값으로 지정된 박스의 경우에는 이런 현상이 적용되지 않습니다.