2nd/10_Wiki/Topic_CSS/CSS_Display.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

li {
  display: inline;
}

Display <span> as a block element: [S1]

span {
  display: block;
}

Display anchor <a> as a block element: [S1]

a {
  display: block;
}

Applying multiple display values: [S1]

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):

li {
  display: inline;
}

Override default display to block (language: 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).