HTML&CSS
[CSS] box-sizing
놀이터주인장
2022. 7. 13. 21:04
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/