box-sizing: content-box;는 브라우저 디폴트값으로, box-sizing 값을 정해지지 않았을 때 기본적으로 적용되는 속성이다. CSS 태그는 아래와 같은 box model로 구성된다. content 영역과 padding, border, margin이 존재한다. 기본적으로 padding, border, margin 값은 0이다.
그런데 만약 box-sizing: content-box;로 padding, border에 특정한 값을 부여하게 되면 오브젝트의 사이즈가 달라지게 된다. 원래의 content 크기에 새롭게 추가한 값이 더해지기 때문이다.
반면 box-sizing: border-box;로 설정하게 되면 padding, border에 값을 부여하더라도 전체 크기는 변하지 않는다. 따라서 오브젝트 사이즈를 구상할 때는 border-box 속성을 사용하는 것이 좋다.
아래는 width와 height를 100px로 주고 padding과 border을 10px, 5px로 주어서 border box와 content box를 비교해 본 결과이다. standard(padding과 border 사이즈가 0)를 기본으로 두고 비교해보면 이해하기 편할 것이다.
<body>
<div class="standard">standard</div>
<div class="border-box">border box</div>
<div class="content-box">content box</div>
</body>.border-box {
margin-top: 10px;
border: 5px black solid;
padding: 10px;
width: 100px;
height: 100px;
box-sizing: border-box;
}
.content-box {
margin-top: 10px;
border: 5px black solid;
padding: 10px;
width: 100px;
height: 100px;
box-sizing: content-box;
}
.standard {
width: 100px;
height: 100px;
background-color: aqua;
}
복습 노트