[CSS] box-sizing (박스 사이징)

   목차 

1. box-sizing
2. content-box
3. border-box

 

 

 box-sizing 

 

box-sizing은 요소의 전체 너비와 높이를 계산하는 방법을 설정한다.

box-sizing 속성의 값은 여러가지가 있지만, 대표적인 것은 content-box와  border-box  2가지이다.

 

---

 

content-box

 

CSS 표준에서 지정한 초기값으로, box-sizing 속성을 굳이 안써도 콘텐츠에 width나 height를 지정한다면   box-sizing: content-box 를 한 것과 동일하게 적용된다. 

요소의 크기= 콘텐츠의 너비 및 높이 (border, padding, 여백은 포함되지않음)

따라서 padding이나 border를 추가할수록 본래의 콘텐츠 크기에 덧대지기 때문에 전체요소의 크기는 커지게 된다. 

아래의 예시를 통해 이해해보자.

 

 

우선 border을 안주고 자식상자에 width: 100%을 주면 부모 크기인 200px에 딱 맞음

 

 

width:100%에 border를 주고, content-box를 추가했을 때 기존 너비에 border가 추가돼서 자식상자가 튀어나옴

 

 

box-sizing 속성을 안넣고, width 200px에 border를 넣었더니 위의 사진과 똑같은 모습으로 렌더링됨 (초기값은 content-box임을 알 수 있음)

 

 

padding도 추가해보았다. 자식박스가 더 커졌다.

 

 

---

 

 border-box 

 

width와 height에 대해 지정한 값의 border와 padding을 고려하도록 브라우저에 지시한다. 

즉, width와 height를 지정했다면, 그 크기를 유지하기 위해서 그 크기 안에 padding과 border를 꾸역꾸역 포함시킨다고 이해하면 쉽다. 

예컨대 요소의 width를 100px로 설정하면 추가한 border나 padding이 100px에 포함되며 콘텐츠 상자는 추가 너비(border, padding)를 흡수하기 위해 축소된다. 

요소의 크기= 콘텐츠의 너비 및 높이 + border + padding 

따라서 width, height를 그대로 유지하면서 border와 padding으로 인해  커지는 것 방지하므로, 요소의 크기를 유지하고 싶을때 유용하다. 

아래의 예시를 보면 바로 이해가 될 것이다.

 

 

width: 200px을 주고 border를 줬는데, 안에 빨간 영역이 border를 제외한 180px로 축소한 모습을 볼 수 있다

 

 

이해를 위해 극단적으로 border 줘보기

 

 

padding을 주면 이렇게 렌더링 된다

 

 

 

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