CSS box-sizing 프로퍼티 사용법

HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다.

이때 상자(Box)는  컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.)

Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요.

CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에서 사용할 수 있는 값은 content-box와 border-box 가 있습니다.

- content-box : box-sizing을 사용하지 않을때의 기본값입니다. 요소의 너비(width)는 컨텐츠 영역만을 나타냅니다.

- border-box : 요소의 너비(width)는 컨텐츠, 패딩, 보더를 합한 값이 됩니다.

box-sizing을 border-box 로 지정하게 되면 복잡한 전체 너비의 계산을 좀더 편하게 사용할 수 있습니다.

페이지내의 모든 요소에 box-sizing을 border-box 로 지정하고 싶으면 다음 스타일을 사용하면 됩니다.

* {
    box-sizing: border-box;
}

CSS의 box-sizing 프로퍼티는 IE8부터 사용할 수 있습니다.