그림 6-36 실행결과

코드를 실행하면 요소의 너비와 높이는 122px이 아니라 정확히 width, height 속성에 지정한 크기만큼 표시되는 것을 볼 수 있습니다.

box-sizing 속성을 border-box 값으로 지정하면 width, height 속성에 지정한 크기에 요소를 맞추기 위해 내부 content 영역의 너비와 높이가 자동으로 조절됩니다. 따라서 box-sizing 속성값을 border-box로 지정하고 요소의 너비와 높이를 다루면 훨씬 편하게 제어할 수 있습니다.