box-sizing: border-box의 효과

box-sizing: border-box;

위 옵션이 추가된 요소는 width나 height 지정시 padding과 border, content를 합산한 결과로 본다.

라고만 알고있었는데 사실은 위 말이 반은 맞고 반은 틀렸다.

아래 적용된 예시를 보면 알 수 있다.

box-sizing: border-box;
width: 100px;
height: 100px;
border: black 1px solid;
padding: 10px;

가로와 세로는 둘 다 총 100px이다.

box-sizing: border-box;
width: 0px;
height: 0px;
border: black 1px solid;
padding: 10px;

content의 크기만 0으로 변경되고 border와 padding은 그대로 유지된다.