CSS Box-sizing (박스 사이징) 이란?

Box-Sizing 이란?

box-sizing 은 width 와 height 이 계산되는 방식을 지정한다.

box-sizing: content-box 의 의미

box-sizing: content-box 인 상태에서 width:100% 를 지정한다면,

• 이는 부모 엘리먼트의 border 와 안쪽 너비를 포함한 공간을 의미한다.
• 부모 엘리먼트의 경계선과 안쪽 여백에 대한 고려를 하지 않는 방식이다.
  • 이 때문에, 아래에 추가적으로 설정된 10px 는 부모 엘리먼트를 뚫고 나온다.

#childContainer {
  box-sizing: content-box;
  width: 100%;
  border: solid #5b6dcd 10px;
  padding: 5px;
}

box-sizing: border-box 의 의미

• 이는 부모 엘리먼트의 border 와 안쪽 너비를 제외한 공간을 의미한다.
• 부모 엘리먼트의 경계선과 안쪽 여백에 대한 고려를 하기 때문에 부모 엘리먼트를 뚫고 나오지 않는다.
  • 이 때문에, 아래에 추가적으로 설정된 10px 도 부모 엘리먼트를 뚫고 나오지 않는다.
• 대부분의 경우, 이 방식이 크기를 조정하기 편하다.

#childContainer {
  box-sizing: border-box;
  width: 100%;
  border: solid #5b6dcd 10px;
  padding: 5px;
}

결론

• 웬만하면 box-sizing: border-box 를 사용하는 것이 좋다.
• 그러나 position: relative 나 position: absolute 와 같은 속성을 가지고 있는 엘리먼트를 다룰 때는 box-sizing: content-box 를 사용하는 것이 padding 의 변화나 border 의 변화에 독립적인 디자인을 얻을 수 있다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing