인프런 커뮤니티 질문&답변
작성한 질문수
project 섹션의 project-info padding 값 질문입니다
작성
·
125
1
강의에서 배운것을 토대로 포트폴리오 사이트를 제작하고 있습니다.
그중에서 프로젝트 슬라이더 부분을 만들고 있는데.
아래 강의에서 만든 코드를 그대로 이런식으로 옴기면 padding값에 의해 25%비율이 커지면서 project photo 부분이 흘러내려가더라고요. 왜냐하면 padding이 안에 크기값을 추가하니깐요. 생각해보니 이게 당연한 것 같은데
.project-info {
width: 25%;
padding: 50px;
}
.project-photo {
width: 75%;
overflow: hidden;
}
그런데 강의에서는 25%비율은 깨지지 않고 유지하면서 padding값이 주어지는데
그 이유가 뭔가요?
답변 1
0
코딩웍스(Coding Works)
지식공유자
제가 신규 강의 오픈 준비하느라 좀 바빠서 질문을 늦게 봤어요. 죄송해요.
.project-info랑.project-photo의 너비 합이 100%이니까 그 안에 준 패딩값을 포함시키는 box-sizing: border-box를 주시면 쉽게 해결될거에요.
감사합니다! 말씀하신대로 하니깐 비율이 깨지지 않으면서 적용되요. border-box가 단순히 border 선만 포함시키는 줄 알았는데 패딩값도 적용된다는건 처음 알았습니당.