box-sizing 헷갈리는거 정리

box-sizing: content-box;

width: 100px;

padding: 10px;

요소(컨텐츠)의 영역만 포함

-> width 100px에 padding 10px도 더해져서 출력

 

box-sizing: border-box;

width: 100px;

padding: 10px;

border, margin, padding을 모두 포함함

-> padding 10px를 포함해서 전체 width가 100px로 출력