Front-end/CSS
[CSS] box-sizing
lodado
2022. 7. 11. 10:15
반응형
박스의 width와 height를 어떻게 구하는지 정하는 방식
box-sizing = content-box | border-box | initial | inherit
값
| content-box | 기본값. width와 height가 콘텐츠 영역만 포함하고 안팎 여백 & 테두리를 포함하지 않는다 |
| border-box | width와 height가 안팎 여백 & 테두리를 포함한다. |
| initial | 초기 값으로 지정 |
| inherit | 부모로부터 상속 |
예제
border-box
content-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px solid black;
}
.content-box {
box-sizing: content-box;
width: 50%;
border: 5px solid red;
float: left;
}
.border-box {
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="border-box">border-box</div>
<br>
<div class="content-box">content-box</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
가로 세로 길이의 정확한 값을 원하면 border-box 설정을 해두자
reference
반응형