We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

요약

box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 데에 사용되는 기본적인 CSS box model 대체하기 위해 사용된다.

이 속성은 적합하게 CSS 박스 모델 명세를 지원하지 않는 브라우저의 동작을 에뮬레이트하기 위해 사용될 수 있다.

초기값content-box
적용대상all elements that accept width or height
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법

Formal syntax: content-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

box-sizing: inherit

content-box
이 값은 CSS 표준에 의해 정의된 기본 스타일이다. width와 height 속성은 오로지 콘텐츠만을 포함하여 측정되며, padding, border, margin을 포함하지 않는다.
참고: padding, border, margin은 박스 외부에 존재한다. 이를테면, .box {width: 350px}; 인 요소에 {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 370px;}이다.
padding-box
widthheight 속성은 padding 크기를 포함한다. 하지만 border 및 margin을 포함하지 않는다.
border-box
widthheight 속성이 padding 및 border를 포함하며, margin을 포함하지 않는다. 이 box model 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.
참고: padding 과  border는 박스 안에 존재한다. 이를테면 .box {width: 350px}; 인  요소에  {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 350px;}이다.

예제

/* Firefox, WebKit, Opera 및 IE8+ 에서 지원됨 */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

명세

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Proposed Recommendation  

브라우저 호환

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 -webkit [1]
10.0
1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box No support 1.0 (1.0) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Yes) (Yes)
padding-box No support 1.0 (1.0) No support No support No support

참고

[1] box-sizing은 인터넷 익스플로러, 파이어폭스의 초기 버전에서 23, 크롬에서 height가 window.getComputedStyle()로 계산될 경우와 연관되지 않는다. IE9의 독자적인 currentStyle 속성은 올바른 height값을 반환한다.

더 참고할 정보

문서 태그 및 공헌자

이 페이지의 공헌자: Sebastianz, webix, dochoul
최종 변경: Sebastianz,