CSS 박스 모델(box model)이란 무엇인가요?

Question

Accepted Answer

CSS의 모든 요소는 안쪽에서 바깥쪽으로 **content**, **padding**, **border**, **margin** 네 개의 레이어로 이루어진 직사각형 **box**입니다. 이들이 어떻게 결합되는지 이해하는 것이 모든 레이아웃의 기초입니다.

```text
┌─────────────── margin ───────────────┐  ← 바깥쪽 공간, 요소 사이의 간격
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← 안쪽 공간, content 주변의 여백
│  │  │       content            │  │  │  ← 텍스트/이미지 (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content 너비 (기본 박스 모델 기준) */
  padding: 20px;     /* 안쪽 여백 — content를 안쪽으로 밀어냄 */
  border: 5px solid; /* 보이는 테두리 */
  margin: 10px;      /* 바깥쪽 여백 — 이웃 요소와 분리 */
}
```

## 흔한 함정: 전체 너비

**기본값**인 `box-sizing: content-box`에서는 padding과 border가 위에 더해지기 때문에 렌더링된 너비가 설정한 `width`보다 *더 커집니다*.

```text
전체 너비 = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

이것이 초보자를 당황하게 합니다 — `width: 200px`로 설정했는데 250px를 차지합니다. 모두가 사용하는 해결책은 다음과 같습니다.

```css
* { box-sizing: border-box; } /* 이제 width가 padding + border를 포함 → 전체 200px */
```

## padding vs margin

- **padding** — border *안쪽*의 공간이며, 요소의 일부입니다(클릭 가능하고 배경색이 적용됨).
- **margin** — border *바깥쪽*의 공간으로 투명하며, 인접한 수직 margin은 **상쇄(collapse)**됩니다(맞닿은 두 margin 중 더 큰 쪽이 적용됨).

## 왜 중요한가

박스 모델은 요소가 실제로 얼마나 커지고 어떻게 간격을 두는지를 결정합니다.

기본 모델이 padding/border를 `width`에 더한다는 점(그리고 `border-box`가 거의 보편적인 해결책인 이유)을 아는 것은 가장 흔한 레이아웃 크기 관련 혼란을 막아줍니다.