문서상의 요소들을 시각적인 목적을 위해서, 모든 요소를 하나의 "직사각형 박스"로 여기는 모델
box-sizing 속성을 사용하면, width 와 height 의 영역기준을 잡을 수 있다.
box-sizing: content-box : 컨텐츠 영역 기준 (디폴트)
전체 크기 = content-box + border + padding + margin
컨텐츠 크기 = content-box
box-sizing: border-box : 테두리 영역 기준
전체 크기 = border-box = content + border + padding + margin
컨텐츠 크기 = border-box – border – padding – margin
즉 margin, padding 등 모든 것을 포함한 크기를 지정하려고 하면 border-box를 사용하면 된다.
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/