[CSS] box-sizing

box-sizing

box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.

---

box-sizing

box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.

특징	설명
기본 값	box-sizing : content-box
적용	box
버전	CSS3
사용성

정의(Definition)

• box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.
• 박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다.
• box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외됩니다.

문법(Syntax)

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

/* 기본 속성 */
box-sizing: content-box;(기본값)
box-sizing: border-box;

/* 기본 값으로 설정합니다. */
box-sizing: initial;

/* 부모 요소의 값을 상속받습니다. */
box-sizing: inherit;

속성(Property)

속성값	설명
content-box	요소에 border, padding 값이 포함되어 있지 않습니다.
border-box	요소에 border, padding 값이 포함됩니다.

예제1(Sample)

box-sizing을 설정하는 예제입니다.

padding: 10px;

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

HTML

CSS

SCRIPT

<div class="sizing-box">
    <div class="box">
        <div class="sub-box">padding: 10px;</div>
    </div>
</div>

.sizing-box {
    display: flex;
    justify-content: space-evenly;
}
.box {
    border-radius: 3px;
    background-color: #a2cbfa;
    border: 1px solid #4390e1;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgb(0 90 250 / 5%), 0 4px 4px rgb(0 90 250 / 5%), 0 8px 8px rgb(0 90 250 / 5%), 0 16px 16px rgb(0 90 250 / 5%);
    width: 200px;
    height: 200px;
    color: #fff;
    padding: 10px;
    margin: 1%;
}
.sub-box {
    border-radius: 3px;
    background-color: #a2cbfa;
    border: 1px solid #4390e1;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 10px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
box-sizing	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---