[CSS] box-sizing

1. box-sizing : content-box 

기본값..!

width와 height 속성이 콘텐츠 영역만 포함한다.

width와 height의 값을 100씩 줬을때, 박스 사이즈는 항상 100 X 100을 유지한다.

padding과 border를 얼마를 넣든 박스 사이즈는 변하지 않는다.

 

 

2. box-sizing : border-box

width와 height 속성이 테두리 영역을 포함한다.

width와 height의 값을 100씩 줬을때, padding과 border를 포함하여 100 X 100을 유지한다.

padding과 border를 넣은 만큼 content가 줄어든다. 

 

통상적으로 padding을 넣는다는 것은 박스안에 여백을 만든다는 것이기 때문에 대부분은 border-box를 사용하게 될 것..!