2nd/10_Wiki/Topic_CSS/CSS_Margins.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-margins	CSS Margins	Frontend	draft	conceptual		margin CSS margins margin-top margin shorthand margin auto centering		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools margin box-model	https://www.w3schools.com/css/css_margin.asp

CSS Margins

🎯 한 줄 통찰 (One-line insight)

The CSS margin properties are used to create space around elements, outside of any defined borders — set individually per side, with the margin shorthand, with auto to horizontally center an element, or with inherit to take the parent's margin. [S1]

🧠 핵심 개념 (Core concepts)

• Purpose — margins are used to create space around elements, outside of any defined borders. [S1]
• Full control — CSS has properties for specifying the margin for each side of an element: margin-top, margin-right, margin-bottom, margin-left. [S1]
• Allowed values: auto — the browser calculates the margin; length — specifies a margin in px, pt, cm, etc.; % — specifies a margin in % of the width of the containing element; inherit — specifies that the margin should be inherited from the parent element. [S1]
• Negative values — negative values are allowed. [S1]
• Shorthand — the margin property is a shorthand for setting all four margins in one declaration with one to four values. [S1]

🧩 추출된 패턴 (Extracted patterns)

• One-to-four value box model — margin accepts 1/2/3/4 values mapping to all sides / vertical+horizontal / top+horizontal+bottom / clockwise per-side. [S1]
• margin: auto centering — set a width and margin: auto to horizontally center an element within its container. [S1]

📖 세부 내용 (Details)

CSS Margins [S1] The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins.

Margin - Individual Sides [S1] CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values: [S1]

Value	Meaning
auto	The browser calculates the margin
length	Specifies a margin in px, pt, cm, etc.
%	Specifies a margin in % of the width of the containing element
inherit	Specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed. [S1]

Example — setting each side individually: [S1]

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin - Shorthand Property [S1] To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the individual margin properties.

The number of values determines which sides they apply to: [S1]

• four values margin: 25px 50px 75px 100px; — top 25px, right 50px, bottom 75px, left 100px
• three values margin: 25px 50px 75px; — top 25px, right and left 50px, bottom 75px
• two values margin: 25px 50px; — top and bottom 25px, right and left 50px
• one value margin: 25px; — all four margins 25px

Example — shorthand with four values: [S1]

p {
  margin: 25px 50px 75px 100px;
}

The auto Value [S1] You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example — centering with auto: [S1]

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

The inherit Value [S1] This example lets the left margin of an element be inherited from the parent element.

Example — inheriting the left margin: [S1]

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

🛠️ 적용 사례 (Applied in summary)

The page's own applied examples are the stylesheets above: per-side margins, the four-value shorthand, the margin: auto centering rule, and the inherit parent/child pair. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Per-side margins (language: CSS):

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Horizontal centering with auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

⚖️ 모순 및 업데이트 (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 Margin Collapse, CSS Border Shorthand, CSS Border Sides
• 참조 맥락: The outer spacing layer of the CSS box model; paired with borders and padding when laying out elements.

📚 출처 (Sources)

• [S1] W3Schools — CSS Margins — https://www.w3schools.com/css/css_margin.asp

📝 변경 이력 (Change history)

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