css) box-sizing 속성

content-box 는 기본으로 적용되는 키워드.

width속성과 height속성이 글자가 들어가는 영역의 크기를 지정하게 만든다.

(width:100px , height:100px 인 영역에 border,margin,padding등의 요소가 추가되어도 width와 height는 100px로 고정)

(따라서 태그의 전체 영역은 width,height의 크기에서 border,margin,padding만큼 커지게 된다.)

 

border-box 는 width속성과 height속성이 테두리를 포함한 영역의 크기를 지정하게 만든다.

(width:100px , height:100px 인 영역에 border,margin,padding등의 요소가 추가되면 border와 padding의 크기만큼 width와 height가 줄어든다. margin은 영역의 바깥에 여백을 주는것이기 때문에 상관이 없다.)