[CSS: Box Model] Margin, Padding, Border, Outline, Width, Height, Box-Sizing, Box-Shadow & Units — Documentation #89

This sub-issue covers the CSS Box Model, one of the most essential fundamentals for layout and spacing.
Contributors will document margin, padding, border, outline, sizing, shadows, and CSS units along with examples and diagrams.

This issue corresponds to:

box-model
├── margin.mdx
├── padding.mdx
├── border.mdx
├── outline.mdx
├── width.mdx
├── height.mdx
├── box-sizing.mdx
├── box-shadow.mdx
└── css-units/
    ├── absolute-vs-relative.mdx
    ├── viewport-units.mdx
    ├── units-with-functions.mdx

Each topic should explain:

• What the property does
• How it affects layout
• Syntax examples
• Common pitfalls
• UI examples (cards, buttons, sections)

Mermaid Diagram (Include in Issue)

CSS Box Model Overview

graph TD
    A[CSS Box Model] --> B[Content]
    A --> C[Padding]
    A --> D[Border]
    A --> E[Margin]

    C --> C1[padding-top]
    C --> C2[padding-right]
    C --> C3[padding-bottom]
    C --> C4[padding-left]

    D --> D1[border-width]
    D --> D2[border-style]
    D --> D3[border-color]

    E --> E1[margin-top]
    E --> E2[margin-right]
    E --> E3[margin-bottom]
    E --> E4[margin-left]

    A --> F[box-sizing]
    F --> F1[content-box]
    F --> F2[border-box]

    A --> G[box-shadow]
    G --> G1[offset-x]
    G --> G2[offset-y]
    G --> G3[blur]
    G --> G4[spread]
    G --> G5[color]

    A --> H[Units]
    H --> H1[Absolute: px, cm, mm]
    H --> H2[Relative: em, rem]
    H --> H3[Viewport: vw, vh]
    H --> H4[Functions: calc#40;#41;, clamp#40;#41;]

Tasks

Box Spacing

• Document margin
• Document padding
• Add examples like spacing around cards, diagonal spacing, and collapsing margins

Borders & Outlines

• Document border
• Document outline
• Provide visual comparisons between border vs outline

Sizing

• Document width
• Document height
• Include min/max-width and height references

Box Behavior

• Document box-sizing
• Add comparison: content-box vs border-box

Effects

• Document box-shadow
• Add soft-shadow UI examples

CSS Units

• Document absolute units
• Document relative units (em, rem)
• Document viewport units (vw, vh, vmin, vmax)
• Document units with functions (calc, clamp)

General Tasks

• Add diagrams, spacing visuals, and before/after examples
• Add best practices (use rem for scalability, use border-box for layout consistency)
• Add pitfalls (margin collapsing, misusing width with padding)
• Cross-link with Layout, Flexbox, Grid, and Typography
• Ensure proper MDX formatting for Docusaurus

Suggested Structure for Each MDX File

• Overview
• Syntax
• Visual example
• Best practices
• Common mistakes
• UI use cases
• Related links

Expected Outcome

A complete set of MDX documents that help learners clearly understand how elements take up space, how spacing works, and how to properly use the box model in real-world UI layouts.