Qaabka Sanduuqa

Casharkaan, waxaan baran doonaa fikradda ugu muhiimsan ee CSS: qaabka sanduuqa (The Box Model). Dhammaan curiyayaasha HTML-ka ah waa sanduuqyo.

1. Waa maxay Box Model?

Sanduuq kasta wuxuu ka kooban yahay 4 qaybood (soo gasho gudaha ilaa dibadda):

┌─────────────────────────────────┐
│          MARGIN (Bannaan)       │
│  ┌───────────────────────────┐  │
│  │       BORDER (Xudud)      │  │
│  │  ┌─────────────────────┐  │  │
│  │  │    PADDING (Bog)     │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENT     │  │  │  │
│  │  │  │ (Nuxurka)     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

2. Content (Nuxurka)

Kani waa nuxurka dhabta ah — qoraalka, sawirka ama curiyahaas.

3. Padding (Bogga)

Padding waa bannaan u dhexeeya nuxurka (content) iyo xuduuda (border).

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Qaab gaaban (shorthand):

.box {
    padding: 10px 20px;  /* sare/hoose = 10px, bidix/midig = 20px */
    padding: 10px;       /* dhammaan dhinacyada = 10px */
    padding: 10px 20px 30px 40px;  /* sare, midig, hoose, bidix */
}

4. Border (Xududda)

Border waa xariiqda ku xeeran sanduuqa.

.box {
    border-width: 2px;
    border-style: solid;    /* solid, dashed, dotted, none */
    border-color: #333;
}

Qaab gaaban:

.box {
    border: 2px solid #333;
    border-radius: 8px;     /* geeso wareegsan */
}

5. Margin (Bannaanka)

Margin waa bannaan ka baxsan xuduudda — fogaanta u dhaxaysa sanduuqan iyo sanduuqyada kale.

.box {
    margin: 20px;           /* dhammaan dhinacyada */
    margin: 10px auto;      /* sare/hoose = 10px, bidix/midig = toos ah (center) */
}

6. box-sizing

Sifada box-sizing waxay xakamaysaa sida cabbirka loo xisaabiyo.

* {
    box-sizing: border-box;  /* padding iyo border waxay ku jiraan cabbirka */
}

border-box: Cabbirka (width) waxaa ku jira padding iyo border. Tani waa tan ugu fudud. content-box: Cabbirka waxaa ku jira oo kaliya nuxurka (caadiga ah).

Layli (Practice)

Abuur sanduuq (div) leh: width 300px, padding 20px, border 2px solid black, margin 30px.
Tijaabi border-radius si aad u wareejiso geesaha.
Isticmaal margin: 0 auto si aad sanduuqa u dhex-marniso (center).
Ku dar box-sizing: border-box oo fiiri farqiga.

Sii wadashada: Casharka xigta, waxaan baran doonaa meelaynta walxaha (positioning)!