box-sizing

box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.

Summary

특징	설명
기본 값	content-box
상속	안됨
애니메이션	안됨
버전	CSS3

Definition

• box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.
• 블록요소에 width 값은 padding, border, margin이 포함된 값입니다. 즉 width 값은 100% 값을 초과 할 수 있지만 border-box을 설정하면 width 값은 100%를 초과 할 수 없습니다.

Syntax

box-sizing : content-box | border-box | inherit;

Property

속성 값	설명
content-box	요소에 border, padding 값이 포함되어 있지 않습니다.
border-box	요소에 border, padding 값이 포함됩니다.
inherit	box-sizing의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
box-sizing

Sample

box1 {
        padding : 10px
        border : 2px solid #fff;
}

box2 {
        padding : 10px
        border : 2px solid #fff;
}

box-sizing : border-box;
box-sizing : content-box;