속성값으로는 content-box와 border-box가 있습니다.

표 6-11 box-sizing 속성값

box-sizing 속성은 width, height 속성의 적용 기준을 지정합니다. 이 속성은 기본으로 content-box 값이 적용된 상태여서 width, height 속성으로 지정되는 영역을 content 영역으로 제한합니다. 따라서 값을 border-box로 정의하면 width, height 속성의 지정 영역을 border 영역으로 바꿀 수 있습니다.

기존 코드에서 width, height 속성값을 수정하는 대신 box-sizing 속성을 추가하고 값으로 border-box를 지정해 봅시다.

div{
  width:100px;
  height:100px;
  padding:10px;
  border:1px solid black;
  margin:10px;
  box-sizing:border-box; /* width, height 속성의 적용 기준을 바꿈 */
}