• 기본 박스 모델 계산법: • 실제 너비 = `width` + `padding` + `border` • 실제 높이 = `height` + `padding` + `border` • `margin`은 요소 간의 간격이므로 요소 자체의 크기에는 포함되지 않습니다 • 문제가 되는 상황: • `width: 300px`로 설정해도 padding과 border가 추가되어 실제로는 더 큰 크기가 됩니다 • 레이아웃을 계획할 때 예상보다 요소가 커져서 디자인이 깨질 수 있습니다 • 예시: ```css .box { width: 200px; padding: 20px; border: 5px solid black; /* 실제 너비: 200px + 40px + 10px = 250px */ } ```