box-sizing에 대해서

box-sizing은 두가지 속성 중 하나를 지정할 수 있다.

 

- content-box

CSS 표준이 정의한 초기 기본값인 width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않는다.

요소의 크기는 너비 = 콘텐츠 너비,

                   높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 계산하지 않음.

 

 

- border-box

width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않는다. 

요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비

                   높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산함.