2nd/10_Wiki/Topic_CSS/CSS_Inline_Block.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-inline-block	CSS Inline-block	Frontend	draft	conceptual		display inline-block inline-block inline vs block horizontal nav menu inline-block menu		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools display layout	https://www.w3schools.com/css/css_inline-block.asp

CSS Inline-block

🎯 한 줄 통찰 (One-line insight)

display: inline-block makes an element flow on the same line as other inline/inline-block elements while still accepting width, height, margin-top, and margin-bottom like a block element — the bridge between inline and block behavior. [S1]

🧠 핵심 개념 (Core concepts)

• Definition — an element with display: inline-block will appear on the same line as other inline or inline-block elements. [S1]
• Block-like sizing on an inline-flow element — in addition to flowing inline, you can set width, height, margin-top, and margin-bottom for the element (like block elements). [S1]
• Contrast with display: inline — pure inline elements (such as the default span) ignore width/height. [S1]
• Contrast with display: block — block elements take a full line, breaking the inline flow. [S1]
• Common use case — building a horizontal navigation menu from list items. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Three-way display comparison — placing inline, inline-block, and block spans side by side reveals which respect width/height and which break onto new lines. [S1]
• Horizontal menu pattern — strip list styling and set display: inline-block on li elements to lay menu items out in a row. [S1]

📖 세부 내용 (Details)

What is inline-block? An element with display: inline-block will appear on the same line as other inline or inline-block elements. In addition, you can set the width, height, margin-top, and margin-bottom properties for the element (like block elements). [S1]

Comparing display values The following example shows the different behavior of display: inline, display: inline-block and display: block: [S1]

span.a {
  display: inline; /* the default for span */
  padding: 5px;
  border: 2px solid red;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px solid red;
}

span.c {
  display: block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px solid red;
}

Horizontal navigation menu A common use of display: inline-block is to create a horizontal navigation menu: [S1]

.nav {
  background-color: lightgray;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 18px;
  padding: 15px;
}

Property reference [S1]

Property	Description
display	Specifies the display behavior (the type of rendering box) of an element

🛠️ 적용 사례 (Applied in summary)

The page's own applied examples are the inline/inline-block/block span comparison and the horizontal navigation menu built from inline-block list items. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Horizontal menu via inline-block (language: CSS):

.nav li {
  display: inline-block;
  font-size: 18px;
  padding: 15px;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• inline vs inline-block vs block — inline (default for span) ignores width/height; inline-block stays on the same line yet accepts width, height, and top/bottom margins; block takes a full line. Choose inline-block when you need elements in a row that still respect explicit dimensions. [S1]

⚖️ 모순 및 업데이트 (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 Display, CSS Float Examples, CSS Horizontal Align, CSS Box Model
• 참조 맥락: Referenced when laying elements out in a row (menus, badges, chips) without losing block-style sizing.

📚 출처 (Sources)

• [S1] W3Schools — CSS Inline-block — https://www.w3schools.com/css/css_inline-block.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Inline-block" page (Astra wiki-curation, P-Reinforce v3.1 format).