box-sizing이란?

.box {
    margin: 20px;
    padding: 30px;
    width: 100px;
    background-color: aqua;
}

이 때 그림에서도 볼 수 있듯이 

이 박스의 실제 너비는 100px이 아니라,

오른쪽 왼쪽 패딩 크기를 합산한

100 + 30 + 30 = 160px이 된다.

 

 

.box {
  margin: 20px;
  padding: 30px;
  width: 100px;
  box-sizing: border-box;
}

만약 이 박스의 너비 자체가 100px이길 원한다면,

box-sizing 속성을 바꿔 주면 된다.

 

기본 값인 content-box을 

border-box로 바꾸어 설정해주면 된다.

 

border-box는

border를 기준으로 크기를 맞춘다는 의미이다.

 

사실상 이게 너무 편하기 때문에 

일반적으로 모든 요소에 이를 적용한다.

 

대부분의 개발자들은 css 파일 상단에 

 

* {
  box-sizing : border-size;
 }

 

를 적어두고 시작한다.

 

그리고 이를 적용하지 않고 

부모 요소의 크기에 따라 상대적으로 크기가 정해지는 

%와 같은 단위를 사용했을 때

요소가 넘치는 등의 문제가 발생할 수 있다.