위의 그림은 CSS Box model을 한장의 도표로 나타낸 것이다. Box는 컨텐츠 영역(width, height), 패딩영역(padding), 보더영역(border), 마진영역(margin), offset(top, right, bottom, left)으로 구성되어 있다. 가장 안쪽의 컨텐츠 영역은 width 속성과 height 속성으로 그 크기가 결정된다. 그리고 그 밖으로 패딩, 보더, 마진 영역이 있다. 그리고position 속성과 함께 지정되는 offset이 있게 된다. 실제적으로 화면에서 보이는 영역은 컨텐츠, 패딩, 보더 영역이고 그 외곽의 마진과 offset은 실제적으로 화면상에서 box라고 인식 되어지지는 않는다.
여기서 가장 주의 해야 하는 것은 컨텐츠 영역의 크기이다. 보통 table을 이용해서 작업하는 것에 익숙한 사람들이 가장 많이 혼동하는 것이 width의 크기를 컨텐츠 영역의 너비로 인식하지 않고 실제로 눈에 보이는 box의 크기로 인식을 하는 것이다. 즉, width를 실제로 눈에 보이는 영역인, width + padding + border의 영역으로 인식하는 것이다. 이것이 CSS2의 box 랜더링과 IE의 box 랜더링이 가장 큰 차이를 보이는 사항이다. CSS2에서는 width나 height를 컨텐츠가 들어갈 수 있는 영역으로 나타내기 때문에 padding이나 border를 적용하게 되면 눈에 보이는 box의 크기는 커지게 된다.

출처 : 실전 웹표준 가이드 (2005, 소프트웨어진흥원)