[CSS] box-sizing 속성; content-box와 border-box의 차이

box-sizing 속성은 요소의 너비와 높이를 계산하는 '방법'을 지정한다.

우선 두 개의 div로 이루어진 box가 위처럼 똑같은 크기로 있다고 하자.

 

지정을 따로 해주지 않으면 기본적으로 content-box 방법이 지정된다.

이 방법은 요소의 너비가 100px라면 콘텐츠 영역이 100px의 너비를 가지고, border와 padding은 아래처럼 요소의 겉에 덧붙여진다.

빨간색 box가 원래 크기. padding 10px이 이 겉에 붙고, 다음으로 border 10px이 겉에 붙은 걸 확인할 수 있다.

 

하지만 아래의 div에만 border-box를 지정해 주면?

border-box는 border와 padding도 요소의 크기에 포함되는 것으로 고려하기 때문에, 전체 크기는 유지한 채로 콘텐츠 영역을 줄인다.

원래의 빨간색 box에서 border 10px이 안으로 붙고, 다음으로 padding 10px이 더 안쪽으로 붙게 된다.

 

정리하자면

box-sizing: content-box; (기본값)
지정한 요소 크기의 바깥쪽으로 border, padding 덧붙이기
box-sizing: border-box;
지정한 요소 크기의 안쪽으로 border, padding 덧붙이기

대부분의 경우 border-box를 사용해서 요소 크기 조절이 편하도록 한다고 한다.

 

참고: https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing 

 

CSS box-sizing border-box content-box / CSS border-box