box-sizing 속성

box-sizing 속성은 요소의 크기 계산 방식을 변경할 수 있게 합니다.

기본적으로 padding을 추가하면 요소가 확장됩니다: 만약 너비 width를 100px로 설정하고 padding-left를 20px로 설정하면, 요소의 실제 너비는 120px가 됩니다.

또한 border-left를 10px로 설정하면, 요소의 실제 너비는 130px가 됩니다. 즉, padding과 border는 블록을 확장합니다(너비와 높이 모두). 이 동작은 box-sizing을 사용하여 변경할 수 있습니다.

구문

선택자 {
	box-sizing: content-box | border-box;
}

값

값	설명
`content-box`	`padding`과 `border` 모두 블록을 확장합니다.
`border-box`	`padding`이나 `border`도 블록을 확장하지 않습니다.

기본값: content-box.

예제 . 기본 동작

현재 두 블록 모두 동일한 높이와 너비를 가지고 있지만, 두 번째 블록에는 padding이 설정되어 있고 첫 번째 블록에는 없습니다. 크기가 어떻게 다른지 확인해 보세요:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

예제 . 기본 동작

현재 두 블록 모두 동일한 높이와 너비를 가지고 있지만, 두 번째 블록에는 10px의 테두리가 설정되어 있고 첫 번째 블록에는 없습니다. 크기가 어떻게 다른지 확인해 보세요:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

예제 . 기본 동작

현재 두 번째 블록에는 padding과 10px의 테두리가 모두 있습니다:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

예제 . border-box 값

두 번째 요소에 box-sizing 속성에 대해 border-box 값을 추가해 보겠습니다. 이제 첫 번째 요소와 두 번째 요소의 크기가 동일해 집니다:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

참고 항목

요소를 확장하지 않는 테두리를 만드는 속성, outline