[CSS] box-sizing에 대해 알아보자.

eunseok·2023년 3월 3일
1

html/css공부

목록 보기
1/5
post-thumbnail

강의를 듣던 중 box-sizing에 대해 정확한 이해를 하고싶어져 내가 정리해 보기로 하였다.


정확하게 이해하고 정리하여 글을 쓰기위해 연습용 예제를 만들었다.
부모인 Parent-container div안에 position을 absolute를 준 Child-container div를 만들어 주었다.

그런데 여기서 이상한 점을 알 수 있다. 바로 부모컨테이너와 자식컨테이너 둘 다에게 같은 width값을 주었지만 자식 컨테이너의 width가 더 크게 잡힌 것.

이유는 무엇일까?

이유는 padding값과 border값을 준 자식 컨테이너의 box-sizing이 content-box로 되어있기 때문인데, box-sizing을 설정 해주지 않으면 자동으로 css표준이 정의한 초기 기본값인 content-box로 주어지게 된다.

content-box는 width와 height의 값에 padding이나 border값은 적용되지 않는다. 그러므로 내가 설정해둔 width는 200이었지만 테두리border의 4px, padding값 20px이 들어가 총 width가 224px이 되어버린 것.

그렇다면 부모 컨테이너 안에 딱 들어 맞는 넓이 200px만큼의 박스를 만들고 싶으면 어떻게 하면 될까??

해결방법!

box-sizing을 border-box로 주면 된다.
그렇게 되면, 내가 주어 준 width:200px이 padding값, border 값을 다 더한 200px로 주어진다.

.child-container {
        position: absolute;
        box-sizing: border-box; <!--추가-->
        top: 50px;
        width: 200px;
        height: 100px;
        padding: 0 10px;
        border: 2px solid gray;
      }

box-sizing: border-box; 한 줄 코드를 넣어주니

200px만큼 넓이를 차지하는 container를 만들 수 있었다.




참고 : https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

0개의 댓글