CSS: box-sizing 속성

발생일: 2015.01.16

키워드: box-sizing

내용:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다.

`box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며,

`content-box`가 기본값이다.

box-sizing: content-box

     CSS 표준에 정의되어 있는 기본값이다.

     width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다.

box-sizing: padding-box

     width 와 height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다.

box-sizing: border-box

     width 와 height 속성이 padding, border 를 포함한다. margin 은 포함하지 않는다.

     이 값은 IE Quirks mode 의 구현과 동일하다.

주의할 점

     - box-sizing 속성은 스타일 상속이 되지 않는다.

     - IE, Firefox 23 이전, Chrome 에선 `window.getComputedStyle()`이 올바르게 적용되지 않는다.

     - IE9 에서 `currentStyle` 속성에서 height가 올바른 값이 리턴되지 않는다.

브라우저 호환성

     - box-sizing 속성은 IE8 이상, Chorme 10~, Firefox 29~ 에서 제공한다.

     - Chrome 10 미만 버전에과, Firefox 29 미만 버전에서는 각각 -webkit 과 -moz prefix 를 사용해야 한다.

     - 모바일에선 Safari 모든 버전, Android 2.1~ (-webkit prefix), Android 4.0 에서 지원한다.

     - `padding-box` 속성은 Firefox 에서만 제공한다.

결론

     적용하려는 브라우저가 `box-sizing`을 완벽하게 지원할 때에만 적용하는 게 좋겠다.

     그렇지 않으면, 기존 CSS Box Model을 사용하는 게 안전하겠다.