html의 요소는 box로 둘러쌓여 있으며 가장 내부의 contents에 실제로 작성하는 내용이 들어간다.
padding,border,margin순으로 감싸고 있다.
1.border
<body>
<div style="border: 5px solid green">
<div style="border: 5px solid red">hi</div>
</div>
</body>
2. padding 추가
<body>
<div style="padding: 10px; border: 5px solid green">
<div style="padding:10px; border: 5px solid red">hi</div>
</div>
</body>
3. margin 추가
<body>
<div style="margin:20px;padding: 10px; border: 5px solid green">
<div style="margin:20px;padding:10px; border: 5px solid red">hi</div>
</div>
</body>
box의 크기
<style>
div {
width: 100px;
height: 20px;
margin: 10px;
padding: 10px;
border: 10px solid green;
}
</style>
<body>
<div>
hi
</div>
</body>
width와 height를 주더라도 border,padding,margin의 값이 추가 된다.
컨텐츠 기준으로 작성한 box의 총 사이즈를 결정하려면 box-sizing옵션을 사용하면된다.
<style>
div {
width: 100px;
height: 20px;
margin: 10px;
padding: 10px;
border: 10px solid green;
}
.box-cb{
box-sizing: content-box;
}
.box-bb{
box-sizing: border-box;
}
</style>
<body>
<div class="box-cb">
hi
</div>
<div class="box-bb">
hi
</div>
</body>