box-sizing 속성은 기본값으로 content-box 를 가진다.
즉, 아무 설정을 하지 않으면 box-sizing 속성은 content-box로 설정 된다.
content-box
div를 예로들어 설명하겠다.
box-sizing 속성이 content-box일 경우, width든 height든 div 태그에 길이를 설정해주면 브라우저는
반드시 태그의 길이를 설정한 값에 맞추려고 한다.
무슨말인가 하면 width를 200px으로 설정하고 padding-left을 50px로 설정을 한다면,
div 태그내에 왼쪽공간을 50px만큼 padding으로 차지하고 나머지 공간을 150px로 차지하는게 아니라
div 태그 내부 공간 만큼은 반드시 200px를 유지하기 위해 50px만큼 공간을 늘리고 왼쪽 padding을 50px를 주게 된다.
즉, div의 전체 width는 50px만큼 늘어나게 된다.
위 그림의 W3C box model에 해당한다.
border-box
content-box와 반대로 width가 설정되어있더라도 padding을 주면 설정값만큼 div의 크기를 늘리는게 아니라
내부 공간을 차지하면서 적용한다.
즉, div 의 크기를 늘리지 않고 padding을 적용하게 된다.
그림의 Internet Explorer box model에 해당한다.