다양한 모드에서 상자의 너비와 높이 판단

div를 설정할 때 div에 패딩을 설정할 때 전체 div의 너비와 높이가 변경되는 것을 발견했습니다. 이로 인해 전체 너비와 높이가 무엇인지에 대한 질문이 생겼습니다. 상자는 어떻게 판단하나요?

문의 결과 상자의 너비와 높이를 결정하는 모드에는 표준 모드와 이상한 모드 두 가지가 있다는 것을 알게 되었습니다.

더 나은 이해를 위해 div를 설정하고 스타일을 지정해 보겠습니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">    #content1</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">        margin</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">        padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">7</span>     } 

일반적인 상황에서 상자의 너비와 높이는 콘텐츠의 너비와 높이 + 테두리의 너비와 높이 + 내부 여백의 너비와 높이 + 외부 여백의 너비와 높이와 같습니다.

표준 모드에서의 상자 너비와 높이 결정입니다

그러나 어떤 시점에서는(ie6, 7, 8에서 DOCTYPE이 누락됨) 상자의 너비와 높이가 설정된 너비와 높이 + 여백의 너비와 높이와 동일합니다. 내용의 너비와 높이 + 내부 여백 여백 너비와 높이 + 테두리 너비와 높이

이상한 모드에서의 상자 너비와 높이 결정입니다

박스 크기 속성을 사용하여 사용할 모드를 결정할 수 있습니다.

content-box: 표준 모드파싱 계산을 사용합니다.

border-box: 이상한 모드 구문 분석 계산

을 사용합니다.

이상한 모드를 통해 전체 너비와 높이를 변경하지 않고 상자에 패딩을 설정할 수 있습니다.