🎨 CSS Lesson 02 — Box Model

1. Box Model — CSS ရဲ့ အဓိက Concept

HTML element တိုင်းမှာ box 4 ထပ် ပတ်နေတယ် — Content → Padding → Border → Margin

┌─────────────────────────────┐  ← MARGIN (transparent, outside space)
│  ┌───────────────────────┐  │  ← BORDER (visible edge)
│  │  ┌─────────────────┐  │  │  ← PADDING (inside space, bg color)
│  │  │    CONTENT      │  │  │  ← actual text/image
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

2. Margin — Outside Space

margin: 20px;                  /* all 4 sides */
margin: 10px 20px;             /* top/bottom  left/right */
margin: 10px 20px 30px 40px;   /* top right bottom left (clock) */
margin-top: 10px;
margin: 0 auto;                /* center horizontally ✅ */

3. Padding — Inside Space

padding: 20px;
padding: 10px 24px;          /* vertical horizontal */
padding-top / padding-left / padding-right / padding-bottom

/* Margin နဲ့ ကွာချက် */
margin  → element ပြင်ပ space (transparent)
padding → element အတွင်း space (background color ပါ)

4. Border

border: 2px solid #333;         /* width style color */
border: 1px dashed red;
border: 4px dotted blue;

border-radius: 8px;             /* rounded corners */
border-radius: 50%;             /* circle! */

border-top: 3px solid #42b883;  /* one side only */

5. box-sizing — အရေးကြီးဆုံး Property!

/* content-box (default) — width က content ကိုပဲ ဆိုတာ */
width: 200px + padding: 20px + border: 5px
→ actual size = 200 + 40 + 10 = 250px ❌ unexpected

/* border-box — width က border အထိ ဆိုတာ */
box-sizing: border-box;
width: 200px + padding: 20px + border: 5px
→ actual size = exactly 200px ✅ predictable

/* Best practice — global reset */
* { box-sizing: border-box; }

6. Width, Height, Max, Min

width: 300px;          /* fixed */
width: 50%;            /* parent ရဲ့ 50% */
width: 100%;           /* parent နဲ့ တူ */
max-width: 800px;      /* ဒီထက် မကြီးဘဲ responsive */
min-width: 200px;      /* ဒီထက် မသေးဘဲ */
height: auto;          /* content အပေါ် မူတည် (default) */

7. Overflow

overflow: visible;  /* default — content ထွက်သွား */
overflow: hidden;   /* ဖြတ်ထား */
overflow: scroll;   /* scroll bar အမြဲ */
overflow: auto;     /* လိုတဲ့အချိန်မှ scroll bar */
overflow-x / overflow-y  /* axis specific */

8. Interactive Box Model Playground