HTML_CSS
(HTML CSS) box-sizing 속성, border-box content-box inherit
코딩ABC
2025. 5. 27. 09:39
반응형
✅ box-sizing 속성
문법:
| box-sizing: content-box | border-box | inherit; |
📦 주요 값
값설명
| content-box | ❗ 기본값. width와 height는 content만 포함. padding, border는 크기에 추가됨 |
| border-box | ✅ width와 height에 padding과 border가 포함됨. 실제 요소의 크기를 정확히 조절하기 쉬움 |
| inherit | 부모 요소로부터 box-sizing 값을 상속 |
🔍 차이점 예제:
/* 공통 스타일 */
div {
width: 200px;
padding: 20px;
border: 10px solid black;
}
/* 1. 기본값: content-box */
.div1 {
box-sizing: content-box;
}
/* 2. 더 많이 쓰이는 border-box */
.div2 {
box-sizing: border-box;
}📏 실제 크기 계산:
요소box-sizing총 너비 계산실제 보이는 크기
| .div1 | content-box | 200 + 2×20 (padding) + 2×10 (border) = 260px | 260px |
| .div2 | border-box | 200px 전체 안에 padding+border 포함 | 200px |
✅ 실무 팁: 초기화 스타일에 포함
많은 개발자들이 아래처럼 전역 설정에 box-sizing: border-box를 사용합니다:
- border-box는 크기 계산이 예측 가능하고
- 패딩/테두리가 늘어나도 전체 레이아웃이 깨지지 않음
- 반응형 웹 디자인에 유리
🎯 요약
속성 값설명
| content-box | width/height는 content만 포함 |
| border-box | width/height에 padding, border 포함 |
| inherit | 부모의 설정을 물려받음 |
🔍 차이점 예제 2:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa { box-sizing: border-box;}
#bb { box-sizing: content-box }
div { border: solid 10px blue;
margin: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="aa">aaa</div>
<div id="bb">bbb</div>
</body>
</html>
반응형