2nd/10_Wiki/Topic_CSS/CSS_Display.md

---
id: css-display
title: "CSS Display"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["display property", "block vs inline", "display block", "display inline-block", "display none"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "display", "layout", "block", "inline"]
raw_sources: ["https://www.w3schools.com/css/css_display.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Display]]

## 🎯 한 줄 통찰 (One-line insight)
The `display` property controls layout by specifying whether an HTML element is treated as a block or an inline element. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Layout control** — the `display` property is an important CSS property for controlling layout; it specifies whether an HTML element is treated as a block or an inline element. [S1]
- **Block-level elements** — a block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, `<section>`. [S1]
- **Inline elements** — an inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples: `<span>`, `<a>`, `<img>`. [S1]
- **Display changes presentation, not type** — setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]
- **`none` removes from flow** — `display: none;` makes an element completely hidden from the document flow (does not take up any space). [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Override default display** — change an element's default display to suit layout, e.g. make `<li>` inline or make `<span>`/`<a>` block. [S1]
- **`inline-block`** — provides an inline-level block container that supports height, width, padding, and margin. [S1]

## 📖 세부 내용 (Details)
The `display` property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element. [S1]

**Block-level Elements**
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples include `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, and `<section>`. [S1]

**Inline Elements**
An inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples include `<span>`, `<a>`, and `<img>`. [S1]

**Common Display Values** [S1]

| Value | Description |
|-------|-------------|
| inline | Displays an element as an inline element |
| block | Displays an element as a block element |
| contents | Makes the container disappear, child elements move up a DOM level |
| flex | Block-level flex container |
| grid | Block-level grid container |
| inline-block | Inline-level block container with height/width/padding/margin support |
| none | Completely hidden from the document flow (does not take up any space) |

**Display each `<li>` as inline:** [S1]
```css
li {
  display: inline;
}
```

**Display `<span>` as a block element:** [S1]
```css
span {
  display: block;
}
```

**Display anchor `<a>` as a block element:** [S1]
```css
a {
  display: block;
}
```

**Applying multiple display values:** [S1]
```css
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
```

**Note:** Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Block vs inline** — choose block (`display: block;`) when the element should start on a new line and take the full width; choose inline (`display: inline;`) when it should flow within text and take only the width it needs. [S1]
- **`inline-block`** — choose this when you need inline placement (no forced new line) but still want to set height, width, padding, and margin. [S1]
- **`none`** — choose when the element should be completely removed from the flow and take up no space. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: `<li>` set to inline, `<span>` and `<a>` set to block, and a paragraph set demonstrating `none`, `inline`, `block`, `inline-block`, `flex`, and `grid`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Override default display to inline (language: CSS):
```css
li {
  display: inline;
}
```
Override default display to block (language: CSS):
```css
span {
  display: block;
}
```

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

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

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Visibility Hide]], [[CSS Max Width]], [[CSS Position]]
- **참조 맥락:** Referenced whenever controlling how an element participates in page layout (block vs inline) or removing it from flow.

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

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