박스 모델과 display
요소의 실제 점유 폭은 content, padding, border, margin 계산 방식에 따라 달라지고 display 값은 줄 차지 방식을 결정한다.
| 개념 | 의미 | 계산/동작 | 확인할 것 |
|---|---|---|---|
| Content | 텍스트와 이미지가 들어가는 영역 | width/height의 기본 기준 | 내용이 넘치는가 |
| Padding | 내용과 테두리 사이 여백 | content-box에서는 실제 폭 증가 | 버튼 안쪽 여백이 일관적인가 |
| Border | 박스 경계선 | 두께가 폭 계산에 포함될 수 있음 | box-sizing 기준을 알고 있는가 |
| Margin | 다른 요소와의 바깥 간격 | 겹침과 흐름에 영향 | 간격을 padding과 혼동하지 않는가 |
| Display | 박스가 줄을 차지하는 방식 | block, inline, flex, grid | 배치 목적에 맞는 display인가 |
박스 모델은 “왜 폭이 예상보다 커졌는가”와 “왜 줄바꿈이 생겼는가”를 설명하는 CSS의 기본 지도다.