box-sizing

box-sizing 속성은 적용되는 요소에 대해 box model이 처리되는 방법을 제어한다. 즉 요소의 너비와 높이를 계산하는 방법을 정의한다.

 

한 단계 더 풀어쓰면 width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다.

 

이 방법에 무슨 문제가 있느냐 하면,

width: 100px; 을 선언하고 작업을 하다가 padding:10px; 을 추가하면 실제 너비가 120px이 된다. 여러 요소가 얽혀 있다면 깨진 레이아웃을 보며 하나씩 너비를 수정해나가야 할 것이다. 직관적이지도 않고 요소마다 값을 계산하기도 힘들다. 

 

box-sizing 속성엔 아래 두 가지 값이 쓰인다.

content-box : 디폴트값으로 위의 너비,높이 공식이 적용된다. 
border-box : 너비와 높이 속성이 padding과 border를 포함한다.

 

따라서 모든 요소에 box-sizing: border-box;를 선언해놓으면

우리가 선언한 width값에 padding을 주더라도 자동으로 실제 컨텐츠 부분의 width가 줄어들면서 padding이 안쪽으로 파고들게 되어 실제 웹에서 보여지는 width값이 우리가 선언한 값 그대로 유지된다.