[CSS] box-sizing의 border-box 와 content-box 의 구분

box-sizing
border-box	width를 실제 content 크기로 지정 (padding, margin, solid의 값 제외)
content-box	width를 content 크기로 지정

 

🐱‍👤주의사항!

모든 초기 CSS는 content-box로 설정된다.

 

---

border-box

padding, margin, solid를 모두 합산하여 컨텐츠의 width값을 계산한다.

그래서 컨텐츠 값이 기존보다 작아질 수 있다.

 

컨텐츠 크기: content - ( padding - margin - solid )

 

content 크기가 56px이다

border-box

56px + 40px (padding) + 4px (border) = 100px

 

 

content-box

padding, margin, solid는 별도로 계산되어 컨텐츠의 width 값이 커질 수 있다.

 

컨텐츠 크기: content + ( padding + margin + solid )

 

content 크기가 100px이다

content-box

100px + 40px (padding) + 4px (border) = 144px

 

 

---

참고자료

https://dasima.xyz/css-box-sizing-content-box-vs-border-box/