css size model
박스 모델 크기 계산 지도
요소의 실제 크기는 content, padding, border, margin이 어디에 포함되는지에 따라 달라진다. `box-sizing`을 먼저 확인하면 레이아웃 예측이 쉬워진다.
margin
border
padding
content
content-box
지정한 width는 콘텐츠만 뜻한다. padding과 border가 바깥으로 더해진다.
border-box
지정한 width 안에 content, padding, border가 함께 들어간다.
margin
요소 바깥 간격이라 실제 배치 공간 계산에서 따로 본다.
| 설정 | width 의미 | 실제 너비 계산 | 사용 기준 |
|---|---|---|---|
| content-box | 콘텐츠 영역 | width + padding + border | 기본 CSS 동작 이해 |
| border-box | 테두리까지 포함한 영역 | width 안에서 내부 영역 조정 | 레이아웃 폭을 예측해야 할 때 |
먼저
box-sizing 값을 확인하고 계산식을 고른다.
다음
padding과 border가 width 안팎 중 어디인지 본다.
마지막
margin은 주변 요소와의 간격으로 따로 합산한다.