box-sizing 속성 정리

box-sizing : 웹 페이지의 박스모델을 제어하는 데 사용되는 css 속성 

속성값은 2가지 속성으로 설정된다.

 

1. content-box : 기본값으로 설정되며 박스 모델에서 요소의 크기를 콘텐츠 영역 만을 기준으로 계산한다. 

.box_style{
	box-sizing:content-box;
}

 

2. border-box : 박스 모델에서 요소의 크기를 테두리, padding, margin의 크기를 모두 포함하여 계산한다.

.box_style{
	box-sizing:border-box;
}

 

 

예시로 2가지 속성과 width:200px , height:200px, padding:10px 속성을 적용한 

div를 비교해 보면 

 

 

1번 속성은 padding + content 크기 (200* 200)을 합쳐진 넓이로 계산되고

2번 속성은 전체크기가 padding을 합한 200 * 200으로 계산된다.

 

※ 요소의 크기 width:100%를 적용했는데 가로스크롤이 나온다면 원래 크기에 padding이나 margin 값이 적용됐을 수도 있어 border-box 속성을 적용하면 된다.