📝 CSS box-sizing: 요소의 너비를 계산하는 두 가지 방식

width: 200px을 줬는데 실제 크기가 200px이 아니라고?
box-sizing을 이해하면 레이아웃이 훨씬 예측하기 쉬워집니다!

---

1. 💡 box-sizing이란?

CSS에서 요소의 총 너비(가로 크기)를 어떻게 계산할지 결정하는 속성입니다.

속성값	총 너비 계산 방식
content-box (기본값)	width + padding + border
border-box	width 그 자체 (padding, border 포함)

---

2. 📝 실습 코드

HTML

<section>
    <h1>총 너비 : 280px : width(200px) + padding(40px) + border(40px)</h1>
    <div>내용</div>

    <h1>총 너비 : 200px : box-sizing</h1>
    <div>내용</div>
</section>

CSS

div {
    width: 200px;
    height: 200px;
    padding: 20px;           /* 상하좌우 각 20px → 좌우 합계 40px */
    border: 20px solid green; /* 상하좌우 각 20px → 좌우 합계 40px */
    margin: 20px;
    background-color: red;
}

div:last-child {
    /* div의 총 너비를 200px로 고정 */
    /* padding과 border가 늘어나도 너비가 바뀌지 않음 */
    box-sizing: border-box;
}

---

3. 🔍 너비 계산 비교

❌ content-box (기본값) — 총 너비 280px

[ margin | border 20px | padding 20px | content 200px | padding 20px | border 20px | margin ]

항목	계산
width	200px
+ padding	20px × 2 = 40px
+ border	20px × 2 = 40px
= 총 너비	280px ← width보다 커짐!

✅ border-box — 총 너비 200px 고정

[ margin | ← border + padding + content 전부 200px 안에 포함 → | margin ]

항목	계산
width	200px (border + padding + content 전부 포함)
padding, border	width 안으로 흡수됨
= 총 너비	200px ← 항상 고정!

---

4. ⚠️ 핵심 포인트

⚠️ margin은 box-sizing에 영향받지 않습니다.
border-box여도 margin은 항상 총 너비 바깥에 추가됩니다.

---

🍯 실무 꿀팁

많은 개발자들이 CSS 파일 맨 위에 아래 코드를 작성합니다:

* {
    box-sizing: border-box;
}
/* 모든 요소에 border-box 적용 → 레이아웃 예측이 훨씬 쉬워짐 */

---

5. 📖 핵심 요약

속성값	총 너비 계산	예시 결과
content-box (기본값)	width + padding + border	200+40+40 = 280px
border-box	width 그 자체	200px 고정

📌 content-box: width = 콘텐츠만, padding/border는 밖으로 추가됨
📌 border-box: width = 전체 크기, padding/border가 안으로 흡수됨
📌 margin은 항상 외부에 추가됨 (box-sizing 영향 없음)