웹 페이지에 있는 HTML 요소들은 모두 사각형 형태의 박스입니다. CSS에서는 이러한 박스를 기반으로 하여 HTML 요소에 경계선을 그리고 요소 사이에 간격을 조정하여 요소를 화면에 배치할 수 있습니다. 이것을 가능하게 해주는 것이 박스 모델(Box Model)입니다.
박스 모델은 위 그림에서와 같이 박스 안에 있는 콘텐츠(HTML 요소)를 감싸고 있는 경계선(Border), 마진(Margin), 패딩(Padding)의 세 가지 구성 요소를 가집니다.
