box-sizing 속성

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

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

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

구문

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

값

기본값: content-box.

예제 . 기본 동작

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

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

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

Результат:

예제 . 기본 동작

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

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

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

Результат:

예제 . 기본 동작

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

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

css#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 값을 추가해 보겠습니다. 이제 첫 번째 요소와 두 번째 요소의 크기가 동일해 집니다:

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

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

Результат:

참고 항목