웹 페이지를 레이아웃할 때 최종 웹 페이지의 너비나 높이가 사전 계산을 초과하는 상황이 종종 발생합니다. 이는 실제로 소위 CSS 상자 모델로 인해 발생합니다.
| #test{margin:10px;padding:10px;width:100px;height:100px;} |
위의 코드에서와 같이 우리는 너비: 120px, 높이: 120px로 그것이 차지하는 위치를 여러 번 계산할 것입니다. 왜냐하면 일반적인 이해에서 패딩은 너비에 포함되어야 하는 내부 여백이고 여백은 외부 가장자리이기 때문입니다. 거리이므로 width=margin-left + margin-right + width이지만 CSS 상자 모델에 대한 브라우저의 해석은 동일하지 않으므로 결국 레이아웃된 웹 페이지의 너비와 높이가 우리의 너비와 높이를 초과한다는 것을 알게 됩니다. 예상된 계산으로 인해 최종적으로 디스플레이 정렬이 잘못될 수 있습니다.
실제로는 그렇지 않습니다. 테스트가 차지하는 위치의 실제 계산은 width=margin-left + margin-right + padding-left + padding-right + width, 즉 너비의 실제 크기가 되어야 합니다. 내부 여백 + 외부 여백 + 너비 자체, 즉 테스트의 실제 크기는 140px 이어야 합니다. 높이 계산은 너비 계산과 동일합니다.
그리고 테스트에 테두리가 추가되면 너비와 높이 알고리즘이 테두리의 크기도 추가해야 합니다.
| #test{margin:10px;padding:10px;border:5px;width:100px;height:100px;} |
여기서 테스트의 너비는 외부 테두리 + 내부 테두리 + 테두리 + 너비 자체여야 하므로 테스트 너비는 150px입니다.
아래 그림과 같이 실제 너비와 높이가 차지하는 위치는 작은 영역 자체가 아니라 가장 바깥쪽의 진한 파란색 레이어까지 쭉 들어가야 합니다.
