박스 모델

 

박스 모델은 아래 그림으로 표현할 수 있다. 왼쪽에 있는 박스를 박스1, 오른쪽에 있는 박스를 박스2라고 하겠다.

 

박스 모델

 

박스에 대한 설명

1. 빨간색 부분이 content가 들어갈 부분이다. width, height는 빨간색 사각형의 가로 세로 길이이다. 

2. 주황색 선은 content와 border의 중간에 위치한다. {border: 1px solid}와 같이 적용하면 보이는 것이 박스의 가장 외측에 있는 테두리선(border)이다. 주황색 선은 빨간색 영역과 테두리선 사이의 여유 공간이며 padding이라고 부른다. border를 100px로 설정하여도 빨간색 부분은 바뀌지 않는다. 

 

노란색 선에 대한 설명

 노란색 선은 박스와 박스 사이에 위치한 선이다. 이것이 바로 margin이다. 박스1의 margin이 20px, 박스2의 margin이 10px이면 노란색 선은 20px로 설정된다. 두 박스의 margin 값 중에 큰 값을 사용한다. 즉, 노란색 선은 인접 박스와의 여유 공간을 얘기한다. 책이나 블로그 사이트에 보면 하나의 박스만 그려놓고 박스모델을 설명하곤 한다. 하지만 css에서 박스모델은 박스들을 배치하고 박스들 간의 거리 설정 또한 중요하기 때문에 두 개 이상의 박스들을 통해 이해하는 것이 좋다. 

 

정리하면, 박스는 내부 빨간색 영역(content)이 가장 중요한 부분이다. 빨간색의 가로, 세로 길이는 padding이나 margin에 의해 변하지 않는다. 내부와 외부를 나누는 기준은 박스의 가장 외측 테두리인 border가 기준이다. 내부 여유 공간은 padding이라 부르며 외부 여유 공간은 margin이라 부른다.