[CSS] Box Sizing 속성

box-sizing 속성

: 말 그대로 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성.

box-sizing: content-box | border-box | initial | inherit

• content-box : 콘텐츠 영역을 기준으로 크기를 정한다
  • 콘텐츠 박스 자체에 300
  • 테두리 10픽셀
  • ⇒ 총 320
• border-box : 테두리를 기준으로 크기를 정한다
  • 테두리까지 합해서 300
  • 콘텐츠는 280픽셀이 됨

• initial : 기본값
• inherit : 부모 요소 속성값 상속받음

---

사용해본 결과 box-sizing을 사용하지 않았을 때의 기본 값은 content-box인것 같다.