box-sizing

요약

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

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

문법

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

width 와 height 속성은 padding 크기를 포함한다. 하지만 border 및 margin을 포함하지 않는다.

border-box

width 와 height 속성이 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;
}

명세

브라우저 호환

참고

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

더 참고할 정보

• CSS box model