박스 모델 배치 판단 순서 점검

박스 모델 배치 판단 순서

요소의 실제 크기는 content, padding, border, margin이 함께 결정합니다. display와 box-sizing을 먼저 고르면 배치 문제가 빠르게 좁혀집니다.

판단 기준
01box-sizing 02display 03margin 04debug
Size

width가 예상보다 커지면 padding과 border가 포함되는 계산 방식부터 확인합니다.

Display

block, inline, inline-block의 줄 차지 방식이 의도와 맞는지 봅니다.

Spacing

마진 상쇄는 세로 흐름에서 생기므로 부모·형제 관계를 같이 추적합니다.

DevTools

Computed 탭에서 실제 박스 크기와 여백 출처를 검증합니다.