Box Model — Qaabka Sanduuqa

Qaabka Sanduuqa (Box Model) waa aasaaska ugu muhiimsan ee CSS [1]. Curiye kasta oo HTML ah waxaa loo tixgeliyaa sanduuq — kaas oo ka kooban afar qaybood oo muhiim ah. Haddii aad si fiican u fahamto Qaabka Sanduuqa (Box Model), wax kasta oo kale oo ku saabsan CSS aad bay kuu fududaan doonaan.

Afarta Qaybood ee Box Model

┌─────────────────────────────────────┐
│            MARGIN                   │  ← Masaafada dibadda (Margin)
│   ┌─────────────────────────────┐   │
│   │         BORDER              │   │  ← Xadka (Border)
│   │   ┌─────────────────────┐   │   │
│   │   │      PADDING        │   │   │  ← Masaafada gudaha (Padding)
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   CONTENT   │   │   │   │  ← Nuxurka (Content)
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

Content (Nuxurka): Qoraalka, sawirka, ama muuqaalka ku dhex jira curiyaha.
Padding (Masaafada Gudaha): Bannaan ka dhex dhasha nuxurka iyo xadka (border-ka).
Border (Xadka): Xariiqda ama darbiga ku wareegsan masaafada gudaha.
Margin (Masaafada Dibadda): Bannaan ka baxsan xadka (border) oo u dhexeeya curiyaha iyo curiyayaasha kale ee ku dhow.

`padding` — Masaafada Gudaha

/* Dhammaan dhinacyada oo isku qiimo ah */
.kaadhka { padding: 20px; }

/* Sare/Hoose iyo Bidix/Midig */
.kaadhka { padding: 16px 24px; }

/* Sare, Bidix/Midig, iyo Hoose */
.kaadhka { padding: 10px 20px 30px; }

/* Sare, Midig, Hoose, iyo Bidix (iyadoo la raacayo jihada saacadda) */
.kaadhka { padding: 10px 20px 30px 40px; }

/* Dhinac kasta oo loo qoray si gooni ah */
.kaadhka {
  padding-top:    16px;
  padding-right:  24px;
  padding-bottom: 16px;
  padding-left:   24px;
}

`margin` — Masaafada Dibadda

/* Isku mid dhammaan dhinacyada */
.kaadhka { margin: 20px; }

/* Dhexdhexaadinta (Dhex-gelinta) adoo isticmaalaya 'auto' */
.weelka {
  width: 800px;
  margin: 0 auto;   /* Sare/Hoose: 0 | Bidix/Midig: Waxay si toos ah isugu dhex-jiraan dhexda */
}

/* Dhinac kasta oo gooni u qoran */
.kaadhka {
  margin-top:    24px;
  margin-right:  0;
  margin-bottom: 24px;
  margin-left:   0;
}

/* Masaafada dibadda ee taban (Negative Margin) */
.kor { margin-top: -20px; }   /* Wuxuu curiyaha kor ugu qaadayaa si ka baxsan booskiisa caadiga ah */

Isku-dhafanka Masaafada (Margin Collapse)

Marka laba curiye oo is-saaran ay yeeshaan masaafada sare iyo tan hoose ee isku dhow (vertical margins), labada margin iskuma darmadaan (isku-dar ma noqdaan) ee midka ka weyn ayaa shaqeeya:

.koowaad { margin-bottom: 30px; }
.labaad  { margin-top:    20px; }
/* Masaafada dhabta ah ee u dhaxaysa: 30px (halkii ay ka ahaan lahayd 50px) */

`border` — Xadka Curiyaha

/* Habka gaaban (Shorthand): dhumucda, nooca xadka, iyo midabka */
.kaadhka { border: 1px solid #ddd; }
.xidid   { border: 2px solid #00d97e; }
.cas     { border: 3px dashed red; }

/* Dhinac kasta oo gooni loo qaabeeyay */
.kaadhka {
  border-top:    2px solid #00d97e;
  border-right:  1px solid #eee;
  border-bottom: 1px solid #eee;
  border-left:   2px solid #00d97e;
}

/* Sifooyinka oo gooni gooni u qoran */
.kaadhka {
  border-width: 2px;
  border-style: solid;
  border-color: #00d97e;
}

/* Noocyada kala duwan ee xadka (border-style): */
border-style: solid;    /* Xariiq toosan oo adag */
border-style: dashed;   /* Xariiq googo'an (Dashed) */
border-style: dotted;   /* Xariiq dhibco ah (Dotted) */
border-style: double;   /* Laba xariiq oo is-barbar socda (Double) */
border-style: none;     /* Aan lahayn xad (None) */

`border-radius` — Geesaha Wareegsan (Goolaynta)

/* Dhammaan geesaha oo siman */
.kaadhka { border-radius: 8px; }
.wareeg  { border-radius: 50%; }   /* Goobaabin buuxda */
.pill    { border-radius: 9999px; } /* Qaabka kaabsalka ama kaniiniga */

/* Afar geesood oo qiimayaal kala duwan leh */
.kaadhka { border-radius: 12px 4px 12px 4px; }

/* Gees kasta oo gooni gooni loo goolayay */
.kaadhka {
  border-top-left-radius:     12px;
  border-top-right-radius:    4px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius:  4px;
}

`width` iyo `height` — Ballaca iyo Dhererka (Cabbirka)

/* Cabbir go'an */
.kaadhka { width: 300px; height: 200px; }

/* Boqolkiiba ahaan la xiriirta curiyaha sare (parent element) */
.weelka { width: 100%; }
.kaadhka { width: 50%; }

/* Isticmaalka cabbirrada ugu yar iyo ugu weyn (min/max) */
.nuxurka {
  min-width:  200px;
  max-width:  800px;
  width:      100%;    /* Waxay la jaanqaadaysaa ilaa 100% laakiin kama dhaafeeyso 800px */
}

.mugga {
  min-height: 100vh;   /* Ugu yaraan wuxuu daboolayaa dhererka buuxa ee shaashadda (Viewport Height) */
}

`box-sizing` — Sida loo xisaabiyo ballaca iyo dhererka curiyaha

Dhibaatada ka dhalata content-box (Habka caadiga ah):

/* Caadiga ah (content-box): */
.kaadhka {
  width:   200px;
  padding: 20px;
  border:  2px solid #ddd;
  /* Ballaca dhabta ah ee bogga: 200px + (20px * 2 padding) + (2px * 2 border) = 244px */
}

Xalka: Isticmaalka border-box

/* border-box (Masaafada gudaha iyo xadka waxay ku dhex jiraan ballaca guud): */
* { box-sizing: border-box; }

.kaadhka {
  width:   200px;
  padding: 20px;
  border:  2px solid #ddd;
  /* Ballaca dhabta ah waa 200px — maadaama padding-ka iyo border-ka lagu dhex xisaabiyay dhexda */
}

Talo Muhiim ah: Had iyo jeer ku bilow koodkaaga CSS xeerkan * { box-sizing: border-box; } si aad uga fogaato khalkhal ku yimaada qaabaynta iyo xisaabinta cabbirrada bogga.

`box-shadow` — Hadhka Sanduuqa

/* x-offset (horizontal), y-offset (vertical), blur-radius, spread-radius, midabka */
.kaadhka { box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05); }
.hover   { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.xidid   { box-shadow: 0 0 0 3px rgba(0,217,126,0.3); }   /* Focus ring */

/* Hadhka gudaha (Inset shadow) */
.mugdi   { box-shadow: inset 0 2px 8px rgba(0,0,0,0.2); }

/* Hadhyaal badan oo is-dul-saaran */
.fancy {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.05),
    0 0 0 1px rgba(0,0,0,0.04);
}

`overflow` — Maaraynta nuxurka ka baxa sanduuqa

.weelka { overflow: visible; }  /* Caadiga ah — qoraalku wuxuu u soo baxayaa bannaanka */
.weelka { overflow: hidden;  }  /* In la qariyo wixii ka baxa sanduuqa */
.weelka { overflow: scroll;  }  /* Wuxuu had iyo jeer muujinayaa barta scroll-ka */
.weelka { overflow: auto;    }  /* Barta scroll-ka waxaa la muujiyaa oo kaliya marka qoraalku dhaafo sanduuqa */

/* U kala habaynta jihooyinka X iyo Y si gooni gooni ah */
.jadwalka { overflow-x: auto;   overflow-y: hidden; }

Tusaale Maqaal Dhamaystiran oo ku saabsan Box Model

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Box Model</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: sans-serif;
      background: #f0f0f0;
      padding: 40px 20px;
    }

    .kaadhadhka-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    /* Kaadhka aasaasiga ah */
    .kaadhka {
      background: white;
      padding: 24px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .kaadhka:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    }

    .kaadhka h3 { font-size: 1rem; margin-bottom: 6px; color: #0a0a0a; }
    .kaadhka p  { font-size: 0.875rem; color: #666; line-height: 1.6; }

    /* Kaadhka astaanta ah (Brand Card) */
    .kaadhka-xidid {
      border: 2px solid #00d97e;
      background: rgba(0,217,126,0.04);
    }
    .kaadhka-xidid h3 { color: #00a860; }

    /* Kaadhka mugdiga ah */
    .kaadhka-mugdi {
      background: #0a0a0a;
      border-color: rgba(255,255,255,0.08);
      color: white;
    }
    .kaadhka-mugdi h3 { color: white; }
    .kaadhka-mugdi p  { color: rgba(255,255,255,0.6); }

    /* Kaadhka gradient-ka ah */
    .kaadhka-gradient {
      background: linear-gradient(135deg, #00d97e, #0ea5e9);
      border: none;
      color: white;
    }
    .kaadhka-gradient h3,
    .kaadhka-gradient p { color: white; }
  </style>
</head>
<body>
  <div class="kaadhadhka-grid">

    <div class="kaadhka">
      <h3>Kaadhka Caadiga ah</h3>
      <p>Background cad, border adag, shadow yar, hover-ka kor u qaadeysa.</p>
    </div>

    <div class="kaadhka kaadhka-xidid">
      <h3>Kaadhka Astaanta ah</h3>
      <p>Border cagaar, background fudud, cinwaanka cagaar.</p>
    </div>

    <div class="kaadhka kaadhka-mugdi">
      <h3>Kaadhka Mugdiga ah</h3>
      <p>Asalka madow, qoraalka cad, xadka oo shafaf ah.</p>
    </div>

    <div class="kaadhka kaadhka-gradient">
      <h3>Kaadhka Gradient-ka ah</h3>
      <p>Background gradient, border la'aanta, dhammaan cad.</p>
    </div>

  </div>
</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Sida walxaha loo soo bandhigo iyo Meelayntooda (Display and Positioning) ee CSS.

Afarta Qaybood ee Box Model

padding — Masaafada Gudaha

margin — Masaafada Dibadda

Isku-dhafanka Masaafada (Margin Collapse)

border — Xadka Curiyaha

border-radius — Geesaha Wareegsan (Goolaynta)

width iyo height — Ballaca iyo Dhererka (Cabbirka)

box-sizing — Sida loo xisaabiyo ballaca iyo dhererka curiyaha

box-shadow — Hadhka Sanduuqa

overflow — Maaraynta nuxurka ka baxa sanduuqa