[CSS] box-sizing

box-sizing 속성

box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다.

문법

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

• content-box : 콘텐트 영역을 기준으로 크기를 정합니다. (기본값)
• border-box : 테두리를 기준으로 크기를 정합니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

---

content-box

지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다.

속성값

지정한 width 및 height 크기는 오직 content 영역의 크기에만 영향을 끼칩니다.

전체 크기 = content-box + border + padding + margin
컨텐츠 크기 = content-box

따라서 border, margin, padding은 설정을 하면 따로 합산됩니다.

 

---

border-box

지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 작어질 수 있습니다. 즉, 이미 주어진 width 및 height을 벗어나지않고 안에서 해결합니다.

속성값

지정한 width 및 height 크기가 모든 box-model의 합계로 지정됩니다.

전체 크기 = border-box = content + border + padding + margin
컨텐츠 크기 = border-box – border – padding – margin

 

 

---

참고

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

https://www.codingfactory.net/10630

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp