box-sizing 속성의 이해

box-sizing 속성은
요소의 크기를 계산할 때 크기의 기준을 설정합니다.

  • content-box(콘텐츠 영역)만 계산할지,
  • border-box(콘텐츠 + 패딩 + 테두리 모두 포함)를 기준으로 계산할지 지정합니다.

content-box와 border-box을 설명하는 아래의 그림을 참고하세요.

box-sizing
content-box vs. border-box

다음의 예시로 box-sizing 속성이 어떻게 구현되는지 살펴보겠습니다.

HTML 
<div class="div-a">Div-A</div>
<div class="div-b">Div-B</div>
CSS 
div {
    width: 150px;
    height: 150px;
    padding: 50px;
    border: 5px solid gold;
}
.div-a {
    box-sizing: content-box; /* 콘텐츠 영역만 계산 */
}
.div-b {
    box-sizing: border-box; /* 콘텐츠 + 패딩 + 테두리 모두 포함 계산 */
}
실제 적용된 모습

형식 구문

CSS box-sizing 속성의 구문 
selector {
    box-sizing: content-box | border-box;
}

구문

CSS 
box-sizing: content-box;
box-sizing: border-box;

/* 전역 값 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

형식 정의

box-sizing 속성의 형식 정의
초깃값 content-box
적용 요소 width나 height를 허용하는 모든 요소
상속 아니오
애니메이션 아니오

참고하세요!
<button> 요소는 브라우저가 설정한 초깃값이 border-box입니다.

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

값

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

content-box

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

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

width나 height를 허용하는 모든 요소 중에서 <button> 요소를 제외하면 브라우저에서 기본으로 설정하는 초깃값입니다.

border-box

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

만약 요소에 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 */
}
실제 적용 모습

위 예제를 보면 알 수 있듯이, 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

참고문헌

같이 보기