1. box-sizing
1️⃣ 기본 개념
HTML 요소의 크기(width, height)는 박스 모델(Box Model) 로 계산됨
기본값은
content-box1) content-box (기본값)
box-sizing: content-box; /* 기본 */- width/height는 content(내용) 영역만 의미
- padding과 border가 추가로 늘어남
2) 예시
width:100px;
padding:20px;
border:10px;➡️ 실제 요소 크기 : width(100) + padding(40) + border(20) = 실제 크기 160px
2️⃣ box-sizing: border-box
1) 개념
box-sizing: border-box;- width/height에 content + padding + border가 모두 포함됨
- 요소의 총 크기가 지정한 값 그대로
2) 예시
width:100px;
padding:20px;
border:10px;→ 실제 요소 크기 딱 100px = width(40) + padding(40) + border(20)
즉,
- padding 늘려도 전체 너비가 변하지 않음
- 레이아웃 깨짐 방지 👍
3) 필요성
- 레이아웃 계산이 쉽고 일관적
- 특히 반응형(responsive) 디자인에 유리
- CSS reset에서 거의 기본으로 넣음
예시)
* {
box-sizing: border-box;
}3️⃣ 정리
속성 | 의미 |
content-box | width는 내용만. padding/border는 크기 증가 |
border-box | width 안에 padding+border 포함. 총 크기 일정 |
4️⃣ 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.box1 {
display: inline-block;
padding: 10px;
width: 300px;
height: 300px;
border: 20px solid green;
}
.box2 {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>box-sizing</h1>
<hr />
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Share article