CSS Box Sizing

CSS Box Sizing

CSS box-sizing 속성이 요소의 총 너비와 높이에 내용박스(채우기)와 테두리를 포함할 수 있게 합니다.

CSS box-sizing 속성을 지정하지 않으면

기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다:

  • width + padding + border = 요소의 실제 너비
  • height + padding + border = 요소의 실제 높이

이는 다음과 같은 의미를 가집니다: 요소의 너비/높이를 설정할 때, 요소는 일반적으로 설정한 크기보다 더 크게 보입니다. (요소의 테두리와 내용박스가 설정된 너비/높이에 추가되기 때문입니다).

아래는 두 개의 너비와 높이가 같이 지정된 <div> 요소를 보여줍니다:

이 div는 더 작습니다
너비는 300px, 높이는 100px입니다.
이 div는 더 큽니다
너비도 300px, 높이도 100px입니다.

위의 두 개의 <div> 요소는 최종 결과에서 다른 크기를 가집니다. (기본적으로 div2는 내용박스를 지정했습니다):

예제

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

직접 시험해 보세요

box-sizing 속성이 이 문제를 해결합니다.

CSS box-sizing 속성을 사용하면

box-sizing 속성이 요소의 총 너비와 높이에 내용박스와 테두리를 포함할 수 있게 합니다.

요소에 속성을 설정하면 box-sizing: border-box;그렇다면 너비와 높이는 내용박스와 테두리를 포함합니다:

이제 두 개의 div는 크기가 같습니다!
Hooray!

이 예제는 이전 예제와 동일하며, 두 개의 <div> 요소 모두 설정되었습니다. box-sizing: border-box;：

예제

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

직접 시험해 보세요

사용으로 인해 box-sizing: border-box; 의 효과가 매우 좋아, 많은 개발자는 페이지에 있는 모든 요소가 이렇게 작동할 것을 원합니다.

아래의 코드는 모든 요소의 크기를 이렇게 직관적으로 조정할 수 있도록 보장합니다. 많은 브라우저는 많은 테스트 요소에 대해 이 효과를 이미 사용하고 있습니다。 box-sizing: border-box;（하지만 모든 것이 아닙니다 - 이것이 input과 textarea가 width: 100%; 일 때 다른 이유입니다）。

모든 요소에 적용하는 것은 안전하고 지혜로운 것입니다:

예제

* {
  box-sizing: border-box;
}

직접 시험해 보세요

CSS Box Sizing 속성

속성 설명
box-sizing 요소의 너비와 높이 계산 방식을 정의합니다: 그들은 내용밖의 패딩과 경계를 포함해야 할까요?