요소의 실제 크기는 네 겹의 상자로 결정된다
content, padding, border, margin을 나눠 보면 크기 계산과 간격 문제가 훨씬 선명해진다.
| 겹 | 역할 | 크기에 미치는 영향 | 확인할 것 |
|---|---|---|---|
| Content | 텍스트와 이미지가 들어가는 실제 내용 영역 | width/height의 기본 기준 | 내용이 넘치지 않는가 |
| Padding | 내용과 테두리 사이의 안쪽 여백 | content-box에서는 실제 폭이 늘어남 | 클릭 영역과 시각 여백이 맞는가 |
| Border | 박스의 시각 경계 | 두께가 계산에 포함될 수 있음 | box-sizing 기준을 정했는가 |
| Margin | 다른 요소와의 바깥 간격 | 박스 바깥의 흐름에 영향 | 간격을 padding과 혼동하지 않는가 |
| box-sizing | 계산 기준 전환 | border-box는 지정 폭 안에 padding/border 포함 | 레이아웃 예측 가능성이 높아졌는가 |
폭이 예상보다 커질 때는 CSS 값을 더 보기 전에 네 겹 중 어디가 실제 크기를 키우는지부터 나눈다.