1. 개요
요소의 너비와 높이를 계산하는 방법을 정하는 속성.
2. 상세
기본적으로 content-box로 지정되어 있다.
따라서 요소의 height를 300px로 지정했다면 content-box의 height가 300px로 적용되는데, 요소에 추가적으로 border 및 padding이 지정되어있다면 실제적인 요소의 height는 300px를 넘어가게 된다.
이런 특성은 요소의 진정한 크기를 파악하기 위해 추가적인 계산을 해야되며, 직관적이지 않기 때문에 불편하다.
따라서 border-box로 지정하는 것이 일반적이다.
이럴 경우 요소의 크기는 content-box, padding, border의 크기를 모두 포함한 값이 된다.
3. 기타
이 속성은 상속되지 않는다.
따라서 body 태그와 같이 최상단에 위치한 태그에 box-sizing을 적용해도 하위 태그에 적용되지 않기 때문에 아래와 같이 선언해야 한다.
* {
box-sizing: border-box;
}