[CSS] box-sizing

---

🎈 box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다.
총 4가지 속성을 가지고 있다.

• content-box: content 영역을 기준으로 크기를 정함 (default)
• border-box: 테두리를 기준으로 크기를 정한다.
• initial: 기본값으로 설정
• inherit: 부모 요소의 속성값을 상속

---

🎈Content-box랑 border-box는 무슨차이?

box-sizing: content에 border나 padding을 추가하게 되면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 더 커지게 된다.

예를 들어, 단순히 너비와 높이를 50px씩 줄 수 있지만 여기에 border나 padding을 주게 된다면 content-box는 50+더해준 값으로 계산을 하게 된다!

하지만 border-box는 다르다! 아래 문단을 확인해보자 :)

---

🎈 자주 사용하는건 border-box?

우리가 css를 초기설정 할때 body값에 margin, padding을 0을 주는 것과 동일하게 box-sizing을 border-box로 거의 준다고 한다. 이유가 무엇일까?

예를 들어 100px 너비에서 border나 padding을 추가하게 된다면 100px + (border or padding값)이 아니라 100px 안에 padding과 border값이 포함이 된다는 것이다. 그만큼 content box는 줄어들게 되는 것이고!

이런 성질 때문에 border-box가 요소의 사이즈를 맞추는 것이 더 용이하다고 한다.

---

🎈 Reference

https://juicyjerry.tistory.com/entry/css%EC%97%90%EC%84%9C-box-sizing-%EC%9D%84-border-box%EB%A1%9C-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0