[CSS] box-sizing

html의 모든 요소들은 margin, padding 등 각각의 여백들을 가지며

이 때 width나 height값을 주게 되면 여백값과 더해져서 화면에 나타나게 된다.

이때 요소의 너비와 높이를 계산하는 방법을 지정해주는 것이 box-sizing 속성이다.

 

content-box

요소의 너비와 높이를 설정하면 테두리(border)와 안쪽 여백(padding)은 여기에 더해진다.

 

border-box

border와 padding의 크기도 요소의 크기로 고려된다.