2nd/10_Wiki/Topic_CSS/CSS_Box_Model.md

---
id: css-box-model
title: "CSS Box Model"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["box model", "CSS box model", "content padding border margin", "element box", "total width"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "box-model", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_boxmodel.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Box Model]]

## 🎯 한 줄 통찰 (One-line insight)
Every HTML element is a box made of four layers — content, padding, border, and margin — and the declared width/height set only the content area, so the box's real footprint adds padding and border on top. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Box model** — every HTML element is wrapped in a box that consists of four layers moving outward: content, padding, border, and margin. [S1]
- **Content** — "The content of the box, where text and images appear." [S1]
- **Padding** — "Clears an area around the content. The padding is transparent." [S1]
- **Border** — "A border that goes around the padding and content." [S1]
- **Margin** — "Clears an area outside the border. The margin is transparent." [S1]
- **Width/height are content-only** — "When you set the width and height properties of an element with CSS, you just set the width and height of the content area." [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Total size formula** — total width = content width + left/right padding + left/right border; total height = content height + top/bottom padding + top/bottom border. [S1]
- **Margin excluded from box size** — margin affects the space the box takes on the page but is not included in the actual size of the box. [S1]

## 📖 세부 내용 (Details)
**The four components**
The CSS box model describes how every HTML element is wrapped in a box around it, consisting of four layers moving outward: [S1]
- **Content** — the content of the box, where text and images appear.
- **Padding** — clears an area around the content; the padding is transparent.
- **Border** — a border that goes around the padding and content.
- **Margin** — clears an area outside the border; the margin is transparent.

**Basic example** [S1]
```css
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
```

**Width and height calculation**
The tutorial emphasizes: "When you set the width and height properties of an element with CSS, you just set the width and height of the content area." To calculate the full size of an element, you must also add padding and borders. [S1]

For a div styled with `width: 320px; height: 50px; padding: 10px; border: 5px solid gray; margin: 0;`: [S1]

Total width: [S1]
```text
320px (content width)
+ 20px (left + right padding)
+ 10px (left + right border)
= 350px (total width)
```

Total height: [S1]
```text
50px (content height)
+ 20px (top + bottom padding)
+ 10px (top + bottom border)
= 80px (total height)
```

**Note**
"The margin property also affects the total space that the box will take up on the page, but the margin is not included in the actual size of the box." [S1]

## 🛠️ 적용 사례 (Applied in summary)
The basic `div` example and the dimensioned calculation example are the page's own applied cases, demonstrating the layers and the total-size arithmetic. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
A box exercising all four layers (language: CSS):
```css
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Padding]], [[CSS Padding and Box Sizing]], [[CSS Height and Width]], [[CSS Outline Style]]
- **참조 맥락:** The conceptual foundation referenced whenever an element's real on-page size matters.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Box Model — https://www.w3schools.com/css/css_boxmodel.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Box Model" page (Astra wiki-curation, P-Reinforce v3.1 format).