반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
border-width:20px;
width:200px
}
</style>
</head>
<body>
<div style="box-sizing: content-box;">
<p>content-box</p>
</div>
<br>
<div style="box-sizing: border-box;">
<p>border-box</p>
</div>
</body>
</html>
box-sizing에는 content-box와 border-box가 있습니다.
content-box는 content영역 즉 p태그의 영역에 200px인거고 + 20의 border를 가집니다. 총 240입니다.
border-box는 border영역까지 포함해서 200px을 가집니다. 여기선 p태그가 160을 가지게 되죠 양쪽 border 20px씩
반응형