Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

4.9 KiB

Raw Blame History

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

title

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

4.9 KiB Raw Blame History