반응형

<!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씩

반응형