(css) box-sizing

속성 값	설명
content-box	width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본값)
border-box	width 속성 값을 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

<style>
   .box1 {
      box-sizing:content-box; /* 콘텐츠 영역 기준 */
      width: 300px; /* 콘텐츠 영역 너비 300px */
      height: 150px; /* 높이 */
      margin: 10px; /* 마진 */
      padding: 30px; /* 패딩 */
      border:2px solid red; /* 테두리 */
   }
   .box2 {
      box-sizing:border-box;  /* 테두리까지(박스 전체) 기준*/
      width: 300px; /* 박스 모델 전체 너비 */
      height: 150px; /* 박스 높이 */
      margin: 10px; /* 마진 */
      padding: 30px; /* 패딩 */
      border: 2px solid red; /* 테두리 */
   }
</style>

<div class="box1"> box-sizing = "content-box" </div>
<div class="box2"> box-sizing = "border-box"</div>