box-sizing

CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성

1. box-sizing : content-box (기본값)

• width와 height는 요소의 실제 콘텐츠 크기만을 나타내고 그 안에 추가되는 padding과 border는 크기에 포함되지 않음

2. box-sizing : border-box

• width와 height, padding, border를 모두 포함하는 크기를 나타냄

200px(width)+20px*2(padding)+2px*2(border)= 244px(콘텐츠의 크기)

200px - 20px*2 - 2px*2 = 200px