padding 부모 벗어남, 사이즈 변경 문제를 해결하는 box-sizing

수업중에 select box 예제 코드를 분석하다가

box-sizing을 왜 쓰는지 

이야기가 나와서 따로 적는다.

 

padding을 쓸 때 왜 box-sizing: border-box를 써주는 걸까?

 

바로 이 부분!

피그마 수치를 볼 때마다 항상 따라오는 부분이다.

왜 padding을 쓸 때 box-sizing: border-box 효과를 주는 것일까?

 h2 {
            margin: 30px;
        }

        .cont-select {
        	★
            position: relative;
            width: 200px;
        }

        .btn-select {
            width: 100%;
            padding: 13px 30px 13px 14px;
            font-size: 12px;
            line-height: 14px;
            background-color: #fff;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            border-radius: 10px;

            cursor: pointer;
            text-align: left;
            background: url("img/triangle_down.png") center right 14px no-repeat;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .btn-select:hover,
        .btn-select:focus {
            border: 1px solid #9B51E0;
            outline: 3px solid #F8E4FF;
        }

        .list-member {
        	★
            display: none;
            position: absolute;
            width: 100%;
            top: 49px;
            left: 0;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }

 

select box 실습 코드 css 일부분을 따왔다.

 

★ 표 부분에 주목해보자.

부모를 기준으로 자식 크기를 조절하고 있다.

(relative , absolute)

 

자식 요소에 위치값이나 크기(%)를 주면,

부모를 벗어나는 경우가 있다.

 

- 부모 요소에 있는 padding 때문에

부모를 벗어날 수 있다.

 

※해결 방법: padding 값을 준 영역들에

box-sizing: border-box; 를 설정한다.

 

※이유 :

부모따라서 자식도 width 100%로 설정시,

content-box 속성이 되어있다.

 

→ padding 값 입력하는 순간 

width 100% + padding 값 이

추가되어 버린다.

(border- box 주면 해결!)

 

 

반응형

 

position 속성이 웹 브라우저에 영향을 끼칠 때

 

요소의 배치를 다시 할 때 영향을 준다.

(layout에 영향을 줄때/ 애니메이션 줄 때)

 

요약

콘텐츠 양이 달라질 때,

가로와 세로의 width 변형이 없게 하고 싶다면!

 

box-sizing으로 고정시켜준다.

 

* element에 box-sizing 설정시,

해당 element의 padding, border 영역을 지정해도

전체 box의 width가 변하지 않는다.

 

* box-sizing에는  총 4가지 속성이 있다.

 

* box-sizing으로 인해 발생하는 

issue 6가지가 있다.

 

→ 자세한 것은 아래 정보 참조!

 

[CSS] padding이 헷깔린다? box-sizing 속성 지정으로 padding 값 직관적으로 조절하기