1번째 container에 height가 `heightNum`값에 따라서 5815px로 설정되었습니다. 근데 이 때, padding-top이 50vh로 설정되었는데 5815px 안에 포함되더라구요.&nbsp;
다른 페이지를 열어서 padding-top을 따로 줬을 때는 height + padding-top이 되어서 어떤 원리로 height 내에 padding이 포함된 것인지 궁금합니다.&nbsp;

default.css에 해당 속성이 기본적으로 포함되어있습니다^^ 예전에는 구버전 인터넷 익스플로러에서 box-sizing을 지원하지 않아서 잘 사용하지 않았었는데, 대부분의 브라우저가 지원하는 현재는 계산이 더 간편한 box-sizing: border-box를 디폴트로 세팅하고 사용하는 경우가 많습니다. 라이브러리들도 border-box를 기본값으로 하는 경우가 많고요~

기존 코드에는 추가되어 있진 않았었네요. 다른 property 때문에도 height가 영향을 받지 않나요?

<pre class="default s-code-block hljs rust" style="margin-top: 0px; margin-bottom: calc(var(--s-prose-spacing) + 0.4em); padding: 12px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: 1.30769; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; font-size: 13px; vertical-align: baseline; box-sizing: inherit; width: auto; max-height: 600px; overflow: auto; border-radius: 5px; color: var(--highlight-color); overflow-wrap: normal;"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; white-space: inherit;"><span class="hljs-keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">box-sizing: border-<span class="hljs-keyword" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-keyword);">box;를 추가하면 되는군요. 감사합니다. </code></pre>

인프런 커뮤니티 질문&답변

padding-top <-> height 질문입니다.