CSS box-sizing 속성

정의와 사용법

box-sizing 속성은 특정 区域에 맞는 특정 요소를 특정 방식으로 정의할 수 있도록 합니다.

예를 들어, 두 개의 겹치지 않는 테두리가 있는 상자를 배치하려면 box-sizing을 "border-box"로 설정할 수 있습니다. 이는 브라우저가 지정된 너비와 높이를 가진 상자를 표시하며, 테두리와 내간격을 상자 안에 넣는 것을 의미합니다.

다른 참고:

CSS3 강의:CSS3 사용자 인터페이스

HTML DOM 참조 매뉴얼:boxSizing 속성

예제

두 개의 겹치지 않는 테두리가 있는 상자를 정의합니다:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

직접 테스트해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

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

속성 값

값 설명
content-box

이는 CSS2.1에서 정의된 너비와 높이 행동입니다.

너비와 높이는 각각 요소의 컨텐트 박스에 적용됩니다.

너비와 높이 이외에 요소의 내간격과 테두리를 그립니다.
border-box

요소에 설정된 너비와 높이는 요소의 브로드박스를 결정합니다.

즉, 요소에 지정된 모든 내간격과 테두리는 설정된 너비와 높이 내에서 그려집니다.

데이터베이스에서 설정된 너비와 높이에서 테두리와 내간격을 뺀 값을 내용의 너비와 높이로 얻을 수 있습니다.
inherit 부모 요소에서 상속받아야 하는 box-sizing 속성의 값을 정의합니다.

기술 세부 사항

기본 값: content-box
상속성: no
버전: CSS3
JavaScript 문법: object.style.boxSizing="border-box"

브라우저 지원

표에 기재된 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

가 -webkit- 또는 -moz-로 시작하는 숫자는 프리퍼셜의 첫 번째 버전을 사용하는 것을 의미합니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5