box-sizing 속성의 이해

box-sizing 속성은
블록 컨테이너 요소의 너비와 높이를 계산할 때, 콘텐츠 영역인 content-box만 고려할지, 콘텐츠 영역과 패딩 ,그리고 테두리(border)를 모두 고려할지, 즉 border-box를 기준으로 할지를 지정합니다.

이 속성은 요소 박스(box)의 크기를 계산(sizing)할 때 크기의 기준을 설정합니다.

블록 컨테이너 요소란 너비나 높이를 지정할 수 있는 요소를 말합니다.

구문과 정의

CSS box-sizing 속성의 구문 
selector {
    box-sizing: content-box | border-box;
}
box-sizing 속성의 정의
초깃값 content-box
단, <button> 요소의 초깃값은 border-box
적용 요소 width나 height를 허용하는 모든 요소
상속 아니오

참고하세요!
box-sizing의 초깃값은 content-box입니다.
단, <button> 요소의 초깃값은 border-box입니다.

주의하세요!
box-sizing의 값에 padding-box는 없습니다.

box-sizing
content-box vs border-box

값

box-sizing은 content-box와 border-box 중에서 요소의 사이즈를 어느 것으로 기준으로 할지를 지정합니다.

content-box

width나 height를 허용하는 모든 요소 중에서 <button> 요소를 제외하면 이 값이 초깃값입니다.

이 값은 요소의 width와 height를 콘텐츠 영역만 고려하여 계산합니다. padding과 border는 크기에 포함되지 않습니다. 즉, padding과 border는 요소의 크기 밖에 추가됩니다.

  • width = 콘텐츠 너비
  • height = 콘텐츠 높이

만약 요소에 padding이나 border가 있다면, 실제 요소의 크기보다 더 크게 보입니다.

border-box

<button> 요소는 이 값이 초깃값입니다.

이 값은 요소의 width와 height를 콘텐츠 영역, padding과 border를 모두 포함하여 계산합니다.

  • width = 콘텐츠 너비 + padding-left + padding-right + border-left-width + border-right-width
  • height = 콘텐츠 높이 + padding-top + padding-bottom + border-top-width + border-bottom-width

만약 요소에 padding이나 border가 있다고 하더라도, 실제 요소의 크기와 동일합니다.

예제

HTML 
<div class="div-1">div-1</div>
<br>
<div class="div-2">div-2</div>
CSS 
.div-1 {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    /* 전체 너비: 200px + (2 * 10px) + (2 * 5px) = 230px
       전체 높이: 100px + (2 * 10px) + (2 * 5px) = 130px
       content-box width: 200px
       content-box height: 100px */
}
.div-2 {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid blue;
    /* 전체 너비: 200px
       전체 높이: 100px
       content-box width: 200px - (2 * 10px) - (2 * 5px) = 170px
       content-box height: 100px - (2 * 10px) - (2 * 5px) = 70px */
}
실제 적용 모습
HTML <div> 태그 - 올바른 이해와 사용 방법

위 예제를 보면 알 수 있듯이, div-1은 box-sizing: content-box;로 지정되어 있어서 padding과 border는 크기에 포함되지 않기 때문에 실제 width와 height보다 더 크게 보입니다.

하지만, div-2는 box-sizing: border-box;로 지정되어 있어서 padding과 border를 모두 요소 크기에 포함하기 때문에 실제 width와 height와 동일한 크기로 보입니다.

이처럼, box-sizing: content-box;보다는 box-sizing: border-box;가 요소의 크기를 지정하는데 직관적입니다. 모든 요소에 box-sizing: border-box;로 적용하려면 다음과 같이 적용하면 됩니다.

CSS 모든 요소에 box-sizing: border-box;로 적용하기 
*,
::before,
::after {
    box-sizing: border-box;
}

브라우저 호환성

box-sizing 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
box-sizing 10 12 29 5.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

box-sizing 속성의 명세서 사양
명세서 사양
box-sizing CSS Box Sizing Module Level 3
#box-sizing

참고문헌

같이 보기