--- id: w3css-margins title: "W3CSS Margins" category: "Programming_Language" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["w3-margin", "w3-section", "W3.CSS λ§ˆμ§„"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.88 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["w3css", "css-framework", "w3schools", "margins"] raw_sources: ["https://www.w3schools.com/w3css/w3css_margins.asp"] applied_in: [] github_commit: "" --- # [[W3CSS Margins]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) `w3-section` exists specifically because many HTML elements have NO default top/bottom margin β€” the source demonstrates two colored blocks touching with zero gap between them until `w3-section` is added, showing this class solves a real visual problem (elements running together) rather than being purely decorative. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`w3-margin`** β€” 16px margin on ALL sides. [S1] - **`w3-margin-{top,right,bottom,left}`** β€” 16px margin on one specific side. [S1] - **`w3-section`** β€” 16px TOP and BOTTOM margin, specifically to separate stacked elements that lack default spacing. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) - All-sides margin: `

I have 16px margin on all sides.

`. [S1] - Directional margin: `

I have 16px margin on the top.

`. [S1] - Section separation: `

I am Blue

I am Green

` β€” without `w3-section`, the two blocks would touch with no gap. [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) - **κΈ°λ³Έ λ§ˆμ§„μ΄ μ—†λŠ” μš”μ†Œ 문제**: λ§Žμ€ HTML μš”μ†Œμ— κΈ°λ³Έ μƒν•˜ λ§ˆμ§„μ΄ μ—†μ–΄ μ„œλ‘œ λΆ™μ–΄λ²„λ¦¬λŠ” 문제λ₯Ό w3-section이 ν•΄κ²°ν•œλ‹€λŠ” 점이 μ‹œκ°μ  λΉ„κ΅λ‘œ 증λͺ…됨. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) ν˜„μž¬ 발견된 μ‹€μ œ 적용 사둀가 μ—†μŠ΅λ‹ˆλ‹€ β€” μ—°μ†λœ μ»¨ν…Œμ΄λ„ˆ 블둝듀을 w3-section으둜 κ΅¬λΆ„ν•˜λŠ” 것이 λ ˆμ΄μ•„μ›ƒ λΆ„λ¦¬μ˜ λŒ€ν‘œ μ‹€μ „ 사둀닀. [S1] ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Separating stacked blocks with w3-section (HTML): ```html

I am Blue

I am Green

``` ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.88 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[W3.CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[W3CSS Padding]], [[W3CSS RTL]] - **μ°Έμ‘° λ§₯락:** λ§ˆμ§„ μ‹œμŠ€ν…œ β€” RTL(였λ₯Έμͺ½μ—μ„œ μ™Όμͺ½) λ ˆμ΄μ•„μ›ƒ μ±•ν„°λ‘œ 이어짐. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” W3.CSS Margins β€” https://www.w3schools.com/w3css/w3css_margins.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Margins" page (Astra wiki-curation, P-Reinforce v3.1 format).