[CSS] box-sizing: border-box;

1. element의 여백

이 속성을 정확하게 알아보기 위해서는 HTML Element의 여백(margin, padding)에 대해 알고 있어야한다.

 

<style>
    *{margin: 0;}           /*body의 기본 margin을 제거*/
    .asdf{
        width: 100px;
        height: 100px;

        margin: 30px;
        padding: 20px;

        background-color: #22b8cf;
        color: #fff;

        border: 10px solid #20c997;
    }
</style>
<div class="asdf">글씨글씨</div>

결과는 아래와 같다.

margin은 바깥으로 밀어내며, padding은 안쪽으로밀어내고 그 안에 100x100의 div안에 글씨가 쓰여졌다.

따라서 margin을 제외한 실측 크기는 160x160이다. 

그렇다면 우리는 항상 디자인적으로 padding과 border를 얼만큼 줄건데 요소의 총크기는 얼마니까 width, height에 미리 여백값을 뺀 값을 넣어야 하는걸까. 아니다. 이딴식이면 코딩안했음.

 

 

 

1. box-sizing: border-box;

이때를 위해서 box-sizing: border-box;가 있는 것이다. 아래와 같이 추가하고

<style>
    *{margin: 0; box-sizing: border-box;}    /*body의 기본 margin을 제거, box-sizing 추가*/
    .asdf{
        width: 100px;
        height: 100px;

        margin: 30px;
        padding: 20px;

        background-color: #22b8cf;
        color: #fff;

        border: 10px solid #20c997;
    }
</style>
<div class="asdf">글씨글씨</div>

결과를 보면 아래와 같다.

box-sizing: border-box;를 추가함으로써 

위와같이 개발자도구의 파란부분을 보면 처음 준 100x100에서 알아서 padding값과, border값이 빠져서 속성이 들어간 것을 알 수 있다.

 

그럼 ㅅㄱ