[CSS] box-sizing 속성

 

 

 

 

box-sizing 속성을 통해 요소의 전체  width 와  height 에  padding 과  border 를 포함할 수 있습니다.

이 속성은 IE8 이상의 브라우저에서 지원됩니다.

 

box-sizing: content-box;  /* 기본값, width와 height에 content만 포함되며 padding과 border는 포함되지 않음 */
box-sizing: border-box;  /* width와 height에 content와 더불어 padding과 border가 포함됨 */
box-sizing: initial;  /* 이 속성을 기본값으로 설정함 */
box-sizing: inherit;  /* 부모의 속성 값을 상속 받음 */

 

content-box(default)	border-box

어떤 요소의  width 와  height  값을 지정할 때,  padding 과  border 의 값이 추가되면 사용자가 생각한 너비와 높이의 값보다 더 크게 나타나는 경우가 많습니다.

이 때,  border-box  속성 값을 사용하면  padding 과  border 를 포함하므로 사용자가 생각한 너비와 높이의 값이 그대로 나타나게 됩니다.

 

 

 

 

box-sizing 미사용

 

div { width: 300px; height: 150px; padding: 30px; border: 2px solid red; background: #fff0f2; }

 

box-sizing 속성을 사용하지 않은 경우,
지정한 width, height 값에 padding, border 값이 추가되어 박스의 크기가 커졌습니다.

 

 

box-sizing: border-box

 

div { width: 300px; height: 150px; padding: 30px; border: 2px solid #409d00; background: #eefbe5; box-sizing: border-box; }

 

box-sizing 속성을 사용한 경우,
지정한 width, height 값에 padding과 border 값이 포함되어 사용자가 지정한 너비와 높이가 그대로 반영되었습니다.