[CSS] 박스 모델의 너비

 박스 모델의 배치를 위해서는 박스 모델의 너비를 이해해야 합니다. 높이는 한 줄에서 가장 긴 높이를 기준으로 맞추겠지만 너비는 좌우 배치에 영향을 주기 때문입니다.

---

box-sizing: 속성 값;

 박스 모델의 너비를 결정하는 속성입니다. 지난 포스트 중에서 박스 모델 콘텐츠 영역의 너비(클릭하면 링크)를 지정하는 width라는 속성을 다뤘었습니다. 그런데 이 width라는 속성은 콘텐츠 영역만 조정하고 다른 박스 모델에는 영향을 주지 않습니다. 그래서 이 box-sizing 속성을 이용하여 width가 적용되는 범위를 조정합니다. 

 올 수 있는 속성 값은 이하 두가지 입니다.

속성 값	효과
content-box	width속성의 범위를 콘텐츠 영역만 적용합니다. (기본 값)
border-box	width속성의 범위를 테두리까지 포함하여 적용합니다. 콘텐츠 영역 + 패딩 + 테두리

그림으로 두 속성의 범위를 표시하면 다음과 같습니다.

---