예를 들어 div1 안에 div2가 있을경우, div2에 margin이나 padding 값을 주면, 해당 값만큼 div1의 크기가 변할 때가 있다.
이 문제는, box-sizing을 어떤 속성으로 했냐에 따라 달라진다.
아래 예제를 보자.
<style media="screen">
.div0{
width:100%;
height:200px;
}
.div1{
width:200px;
height:100px;
border:1px solid black;
margin:0 20px 0 0;
float: left;
box-sizing:border-box;
}
.div2{
width:200px;
height:100px;
border:1px solid blue;
padding:20px;
}
.div3{
width:200px;
height:100px;
border:1px solid black;
float: left;
}
.div4{
width:200px;
height:100px;
border:1px solid red;
padding:20px;
box-sizing:content-box;
}
</style>
<div class="div0">
<div class="div1">
<div class="div2">
b1ix.net
</div>
</div>
<div class="div3">
<div class="div4">
b1ix.net
</div>
</div>
</div>
왼쪽 div는 "box-sizing:border-box"를 적용한 모습이고, 오른쪽 div는 "box-sizing:content-box"가 적용된 상태이다.
border-box옵션은 자신의 기존 width와 height가 유지된 채로 안쪽으로 padding이 적용 된다.
content-box옵션은 자신의 기존 width와 height에서 padding만큼이 더 추가 돼서 적용 된다.
이는 padding뿐만 아니라 margin도 마찬가지다.