-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
질문입니다.
20.12.22 22:34 작성 조회수 106
1
.feature가 width: 70%; 인상태이고
그 바로아래 자식인 .office 는 width: 60%,
.service는 width: 40%를 주셨는데 이상태에서
.office에 padding-right를 100px주면 .service가 옆으로 밀려서 .feature 의 width를 초과해서 줄바꿈이 되야 하는게 아닌가요?
답변을 작성해보세요.
2
코딩웍스(Coding Works)
지식공유자2020.12.23
이 부분은 웹개바르르 님이 착각하실 수도 있는 부분일거에요.
(60% + 100px) + 40% 그러니까 100%를 초과했으니까 가로배치가 안되야 하는거 아닌가라고 아마도 이렇게 생각하지 않으셨을까 합니다.
하지만 이 경우는 60% 내에서 100px를 쓴 것이기 때문에 6:4로 유지하는 경우가 됩니다.
box-sizing: border-box가 있기 때문에 가능합니다.
style.css 가장 상단에 이 부분이 있습니다. 그래서 패딩값 100px을 60% 내에 포함시켜서 너비가 초과되지 않습니다.
/* Reset CSS */
* { box-sizing: border-box; }
물론 마진 좌우를 주면 초과되니까 안됩니다. 패딩만 해당 됩니다.
1
답변 2