화면을 100%로 구성하는 와중에
자식 컨테이너에게 padding 혹은 margin을 주고 싶은 경우가 있다.
하지만 이런 경우, 아래와 같이 코드를 작성하면 스크롤이 생겨버린다.
먼저 아래 html, css를 적용하면 스크롤이 생기는 것을 확인할 수 있다.
<body>
<div class="parents">
<div class="child"></div>
</div>
</body>.parents{
width: 100vw;
height: 100vh;
}
.child{
width: 100%;
height: 100%;
margin: 10px;
border: 2px solid black;
}
부모 컨테이너에게 padding 을 주는 경우
기본 css를 리셋한 뒤, box-sizing: border-box;를 사용한다.
기본 브라우저 스타일로 마진과 패딩이 주어지기에 이를 모두 0으로 리셋하거나 reset.css를 사용하고,
box-sizing: border-box을 사용해 패딩 혹은 마진을 포함한 크기를 계산하면 스크롤이 생기는 것을 방지할 수 있다.
* {
margin: 0; /*기본 마진 초기화*/
padding: 0; /*기본 패딩 초기화*/
}
.parents{
width: 100vw;
height: 100vh;
box-sizing: border-box; /* 중요 */
padding: 10px; /* 패딩 적용 */
}
.child{
width: 100%;
height: 100%;
border: 2px solid black;
}
자식 컨테이너에게 margin 을 주는 경우
부모 컨테이너를 플렉스 컨테이너로 설정해 자식 컨테이너가 부모 컨테이너의 정중앙에 위치하게 한다.
이로써 자식 컨테이너가 부모 컨테이너를 넘지 않게 된다.
또한 자식 컨테이너의 크기를 마진크기 * 2 만큼 빼줘야 잘 정렬된다.
* {
margin: 0;
padding: 0;
}
.parents{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: calc(100% - 20px); /* 부모 컨테이너의 너비에서 마진을 뺀 값 */
height: calc(100% - 20px); /* 부모 컨테이너의 높이에서 마진을 뺀 값 */
margin: 10px;
border: 2px solid black; /* 마진 적용 */
}
