[CSS] box-sizing

box-sizing - padding과 border는 크기가 증가할 수 있다는 특징을 가짐. - 이때 크기 증가를 직접 계산해서 정의하거나 자동으로 브라우저가 계산하도록 하기 위해 box-sizing: border-box;를 지정 할 수 있음. - 요소의 크기 계산 기준을 지정. [속성 값] - content-box: width, height만으로 요소의 크기를 계산. 기본 값. - border-box: width, height에 안쪽 여백 padding과 테두리선 border를 포함하여 요소의 크기를 계산. - padding-box도 존재하지만 브라우저 호환성이 떨어짐. content-box, border-box 중 선택하여 사용하도록. - 개발자도구의 computed 영역에는 각각 파랑, 초록, 노랑, 주황색 박스가 있음. - 안에서부터 순서대로 content-box, padding-box, border-box, margin-box에 해당. - box-sizing: conten...

원문링크 : [CSS] box-sizing