box-sizing이란

CSS에서 box-sizing 속성은 박스 모델에서 요소의 크기를 계산하는 방법을 지정합니다. 요소의 너비와 높이를 계산할 때 내부 여백(padding)과 테두리(border)를 포함할지 여부를 결정하는 데 사용됩니다.
-chatGPT

box-sizing 속성값

content-box

기본 값이다. 내부 여백(padding)이나 주변 테두리는 크기에 반영되지 않는다.

border-box

요소의 크기에 padding 및 테두리가 모두 포함된다.
즉, padding으로 인해서 요소의 크기가 달라지지 않기를 원한다면 해당 요소에 box-sizing: border-box 값을 추가하면 된다.