CSS 탐구생활 : content-box vs border-box

 

1. box-sizing이란?

css의 속성중 하나로 요소의 너비와 높이를 계산하는 방법을 지정한다. 속성값으로 content-box와 border-box를 가진다.

 

 

2. content-box

content-box는 콘텐츠 영역을 기준으로 width와 height값을 결정한다. padding 또는 border를 설정해준 경우 content 위에 더해지는 형식이다.

 

 

<예시>

요소의 width(100px) + border 좌우(2px) = 전체 width(102px) 요소의 height(100px) + border 상하(2px) = 전체 height(102px)

 

 

3. border-box

border-box는 content-box와 다르게 border,padding도 요소의 크기로 고려한다. 박스의 width값, height값을 설정해주고 border와 padding을 설정해주면 그 값만큼 content의 크기가 줄어든다. 

 

 

<예시>

width값과 height값을 100px을 주었지만 padding값 10px을 주게 되면 content의 width와 height값이 80px로 줄어듬

 

 

-- 주의 --

box-sizing을 따로 설정해주지 않았다면 box-sizing의 기본값은 content-box이다. border-box가 필요한 경우 box-sizing을 따로 작성해주어야 한다.