box model

html 요소들은 위와 같은 box model을 가지고 있다.

 

box-sizing 속성의 값은 두 가지로 나눌 수 있다.

 

content-box: width속성의 값이 내용(content)에만 적용된다.

border-box: width속성의 값이 내용 + padding + border 값 만큼 적용된다. 따라서 content의 크기는 width - padding + border 값으로 설정된다.