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

Hwi Kwon

작성한 질문수

애플 웹사이트 인터랙션 클론!

SVG 로딩 애니메이션 1

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

해결된 질문

20.10.06 10:40 작성

198

1번째 container에 height가 `heightNum`값에 따라서 5815px로 설정되었습니다. 근데 이 때, padding-top이 50vh로 설정되었는데 5815px 안에 포함되더라구요.

다른 페이지를 열어서 padding-top을 따로 줬을 때는 height + padding-top이 되어서 어떤 원리로 height 내에 padding이 포함된 것인지 궁금합니다.

svg HTML/CSS 웹 디자인 인터랙티브 웹 javascript 클론코딩

답변 4

Hwi Kwon

질문자

2020. 10. 07. 07:18

확인 감사합니다.

1분코딩

지식공유자

2020. 10. 06. 12:22

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

Hwi Kwon

질문자

2020. 10. 06. 11:43

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

Hwi Kwon

질문자

2020. 10. 06. 11:40

box-sizing: border-box;를 추가하면 되는군요. 감사합니다.

Hwi Kwon

작성한 질문수

전체 Q&A

질문하기