반응형
<!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씩
반응형
'[HTML && CSS] > [CSS]' 카테고리의 다른 글
| [CSS] visibility:hidden vs display:none (0) | 2021.07.01 |
|---|---|
| [CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row) (0) | 2021.07.01 |
| [CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="") (0) | 2021.06.26 |
| [CSS] CSS 강제 적용시키기 !important (0) | 2021.06.26 |
| [CSS] FlexBox(플렉스 박스), Grid(그리드) [레이아웃 배치 및 정렬], place-content (0) | 2021.06.24 |