4.3-dars: Blok modeli

Blok nima?

Internetda har bir HTML-teg — bu to'rtburchak. Jiddiy aytyapman. Sahifadagi har qanday element — sarlavhadan tortib rasmgacha — to'rtburchak qutidir. Brauzer «sarlavha» yoki «abzats»ni emas, balki u qoidalarga muvofiq joylashtiradigan to'rtburchaklarni ko'radi.

Bu to'rtburchakning matryoshkadagidek to'rtta qatlami bor:

• content — mazmun (matn, rasm, boshqa teglar)
• padding — ichki bo'shliq (mazmundan ramkagacha)
• border — ramka (qalinligi, uslubi, rangi)
• margin — tashqi bo'shliq (ramkadan qo'shni elementlargacha)

Butun bu tuzilma blok modeli (box model) deb ataladi. Bu CSSning asoslar asosidir. Agar blok modelini tushunsang — sahifa tuzilishi qanday ishlashini tushunasan.

Mana bu kodda qanday ko'rinishini ko'raylik. Bu qatlamlarning har birini biz CSS xususiyatlari orqali belgilaymiz. Hozir esa har birini alohida ko'rib chiqamiz.

Yodda tut: brauzer elementning yakuniy kengligini width + padding-left + padding-right + border-left + border-right tarzida hisoblaydi. Balandlik bilan ham xuddi shunday. Bu ko'pincha kutilmagan natijalarga olib keladi, lekin bu haqda box-sizingga yetganimizda gaplashamiz.

Keling, darhol oddiy misolga qaraymiz. Mana bitta abzatsli HTML, pastda esa unga bo'shliqlar va ramka qo'shadigan CSS:

<!-- HTML -->
<p class="box">Men — to'rtburchakman!</p>

<!-- CSS -->
.box {
  width: 300px;
  padding: 20px;
  border: 4px solid #e94560;
  margin: 30px;
  background: #0f3460;
}

Bu abzats sahifada 300 + 20*2 + 4*2 = 348px joy egallaydi. Bunga tashqi bo'shliqlar ham qo'shiladi. Bu arifmetikani yodda tut — u foydali bo'ladi.

padding — ichki bo'shliq

padding — bu element mazmuni bilan uning ramkasi orasidagi bo'shliqdir. Tasavvur qil: quti ichida narsa yotibdi va sen uning devorlarga tegmasligini xohlaysan — uning atrofiga yumshoq qatlam qo'yasan. Mana shu — padding.

Padding'ni to'rt xil usulda belgilash mumkin:

/* Barcha tomondan bir xil */
padding: 20px;

/* Vertikal va gorizontal bo'yicha */
padding: 10px 30px; /* yuqori/pastdan 10px, chap/o'ngdan 30px */

/* Uchta qiymat: yuqori, yon tomonlar, past */
padding: 10px 20px 30px;

/* To'rtta qiymat: yuqori, o'ng, past, chap (soat yo'nalishi bo'yicha) */
padding: 10px 20px 30px 40px;

/* Har bir tomon alohida */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Eng ko'p ishlatiladigan holat — matn blok chetlariga yopishib qolmasligi kerak. Padding'li tugma qanchalik chiroyli ko'rinishiga qara:

Ikkinchi tugma yanada ozoda va professional ko'rinadi, shunday emasmi? Bularning barchasi padding tufayli — u matnga «nafas olish» imkonini beradi.

Muhim: padding element o'lchamini kattalashtiradi. Agar sen width: 200px va padding: 20px belgilagan bo'lsang, element kengligi 240px bo'ladi (chapdan 20 + kontent 200 + o'ngdan 20). Bunga box-sizing haqida gaplashganimizda yana qaytamiz.

border — ramka

border — bu elementning chegarasi. U padding va margin orasida chiziladi. Ramkaning har doim birga keladigan uchta parametri bor:

• qalinligi — 1px, 3px, 5px va h.k.
• uslubi — solid (yaxlit chiziq), dashed (shtrixli), dotted (nuqtali), double (qo'sh chiziq)
• rangi — CSS'dagi istalgan rang

/* Qisqa yozuv (eng ko'p qo'llaniladigan usul) */
border: 2px solid #e94560;

/* Tomonlarni alohida belgilash mumkin */
border-top: 3px dashed #f97316;
border-bottom: 1px solid #444;

/* Yoki har bir xususiyatni alohida */
border-width: 2px;
border-style: solid;
border-color: #10b981;

/* Burchaklarni yumaloqlash */
border-radius: 10px;    /* barcha burchaklar */
border-radius: 10px 20px; /* yuqori chap/o'ng, past o'ng/chap */

Turli ramka uslublari qanday ko'rinishini ko'r:

border-radius — bu alohida sehr. U burchaklarni yumaloqlaydi. Qiymat qancha katta bo'lsa, element shuncha dumaloq bo'ladi. border-radius: 50% da kvadrat aylanaga aylanadi:

E'tibor ber: border ham xuddi padding kabi element o'lchamini kattalashtiradi. border: 5px kenglikka 10px qo'shadi (chapdan 5 + o'ngdan 5).

margin — tashqi bo'shliq

margin — bu elementning tashqarisidagi bo'shliq. U bu elementni qo'shnilaridan ajratib turadi. Agar padding «quti ichidagi yumshoq qatlam» bo'lsa, margin — «javondagi qutilar orasidagi masofa»dir.

U xuddi padding kabi yoziladi:

/* Barcha tomondan */
margin: 20px;

/* Vertikal va gorizontal bo'yicha */
margin: 10px 30px;

/* Uch va to'rt qiymat — xuddi shu tamoyil bo'yicha */
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;

/* Alohida tomonlar */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Margin'ning ikkita muhim xususiyati bor:

1. Qulash (collapsing). Ikki blok bir-birining ostida turganda, ularning vertikal margin'lari qo'shilmaydi, balki eng kattasi olinadi. Agar yuqoridagi blokda margin-bottom: 30px, pastdagisida esa margin-top: 20px bo'lsa, ular orasidagi masofa 50px emas, 30px bo'ladi.

2. Manfiy margin. Ha, margin manfiy bo'lishi mumkin! Bunda element qo'shnisining «ustiga chiqib» qoladi yoki ota-elementdan tashqariga chiqadi.

/* Elementni chapga surish */
margin-left: -20px;

/* Elementni yuqoriga ko'tarish */
margin-top: -30px;

Bu nostandart dizaynlar uchun foydali, lekin undan suiiste'mol qilma — sahifa tuzilishini buzish oson.

Margin'ning yana auto qiymati bor. Agar kengligi belgilangan blok elementga margin: 0 auto qo'ysang, u gorizontal bo'yicha markazlashadi:

.centered {
  width: 400px;
  margin: 0 auto;
}

Bu blokni markazlashtirishning klassik usuli. Faqat kengligi belgilangan blok elementlar uchun ishlaydi.

width va height — kenglik va balandlik

width va height mazmun sohasining (content area) o'lchamlarini belgilaydi. Odatiy holatda, agar width: 200px deb yozsang, bu faqat kontentning kengligi bo'ladi, padding va border'siz.

.box {
  width: 200px;      /* kontent kengligi */
  height: 100px;     /* kontent balandligi */
  padding: 20px;     /* yakuniy kenglikka +40px */
  border: 2px solid; /* yakuniy kenglikka +4px */
  /* Yakuniy kenglik: 200 + 40 + 4 = 244px */
}

O'lchov birliklari:

• px — piksel (mutlaq birlik)
• % — ota-elementning kengligidan foiz
• vw / vh — brauzer oynasidan foiz (1vw = oyna kengligining 1%i)
• em / rem — shrift o'lchamiga nisbatan
• auto — brauzer o'zi hisoblaydi (odatiy holat)

Balandlik uchun height: auto balandlik mazmunga moslashishini bildiradi. Agar height: 200px qat'iy balandlik belgilansa-yu, kontent ko'proq bo'lsa — u chegaradan tashqariga oqib chiqadi. Buni tuzatish uchun overflow ishlatiladi:

.box {
  height: 100px;
  overflow: hidden;    /* ortiqchasi kesib tashlanadi */
  overflow: scroll;    /* skroll paydo bo'ladi */
  overflow: auto;      /* faqat kerak bo'lsa skroll */
}

box-sizing: border-box — padding kenglikni buzmasligi uchun

width + padding + border = haqiqiy kenglik deb qanday hisoblaganimizni eslaysanmi? Bu ko'pincha jonga tegadi. Sen blok 300px bo'lishini xohlaysan, width: 300px belgilaysan, padding: 20px qo'shasan — va blok 340px bo'lib qoladi. Qayta hisoblashga to'g'ri keladi.

box-sizing: border-box bu muammoni bir marta va butunlay hal qiladi. Bunda widthga kontent ham, padding ham, border ham kiradi. Blok har doim aynan sen belgilagan kenglikda bo'ladi.

/* Oldin — azob beruvchi matematika */
.box-old {
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* Haqiqiy kenglik: 344px */
}

/* Keyin — osoyishtalik va baxt */
.box-new {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* Haqiqiy kenglik: 300px! */
}

Deyarli barcha dasturchilar hozir buni CSS'ning eng boshiga yozishadi:

*, *::before, *::after {
  box-sizing: border-box;
}

Bu selektor border-boxni sahifadagi barcha elementlarga qo'llaydi. Va bundan keyin bezovtalanishga hojat yo'q — kenglik har doim bashorat qilinadigan tarzda ishlaydi.

display: block, inline, inline-block

Har bir HTML-teg odatiy ko'rinish turiga ega. display xususiyati uni o'zgartirish imkonini beradi. Uchta asosiy qiymat:

display: block

Blok elementlar ota-elementning butun kengligini egallaydi va yangi qatordan boshlanadi. <div>, <p>, <h1>, <section> — bularning barchasi odatiy holatda blok hisoblanadi. Ularda width, height, margin, padding ishlaydi.

.block {
  display: block;  /* bu div uchun odatiy qiymat */
  width: 300px;
  margin-bottom: 10px;
}

display: inline

Satr elementlari bir-birining ketidan qatorda joylashadi. <span>, <a>, <strong> — satr elementlari. Ularda width, height, margin-top/bottom ishlamaydi. Padding faqat yon tomonlarda ishlaydi.

.inline {
  display: inline;
  /* width va height ishlamaydi! */
}

display: inline-block

Gibrid. Element o'zini satr elementidek tutadi (boshqalar bilan bir qatorga turadi), ammo shu bilan birga unda blok elementdagidek width, height, margin va padding ishlaydi. Tugmalar, katakli kartochkalar, izohli ikonkalar uchun juda mos.

.btn {
  display: inline-block;
  padding: 12px 28px;
  margin: 8px;
  /* width va height ham ishlaydi */
}

Zamonaviy loyihalarda joylashtirish uchun ko'pincha flex va grid ishlatiladi (biz ularni keyingi darslarda o'rganamiz), lekin block, inline va inline-block orasidagi farqni tushunish — bu asos, usiz hech qayerga borib bo'lmaydi.

DevTools: blok modelini ko'ramiz

Brauzerning dasturchi vositalari (DevTools) — blok modeli bilan ishlashda eng yaxshi do'sting. Mana ulardan qanday foydalanish kerak:

1. Sahifani brauzerda och (Chrome, Firefox, Edge)
2. F12 tugmasini bos yoki O'ng tugma → Kodni ko'rishni tanla
3. Elements (yoki Inspektor) bo'limini tanla
4. HTML panelidagi istalgan elementga sichqonchani olib bor
5. O'ng tomonda yoki pastda blok modelining sxemasi paydo bo'ladi

Mana bu sxemada nimani ko'rasan:

┌──────────────────────────────────────┐
│            margin: 30px              │
│  ┌──────────────────────────────┐   │
│  │         border: 4px          │   │
│  │  ┌────────────────────┐      │   │
│  │  │    padding: 20px   │      │   │
│  │  │  ┌──────────────┐  │      │   │
│  │  │  │  content     │  │      │   │
│  │  │  │  300 x 100   │  │      │   │
│  │  │  └──────────────┘  │      │   │
│  │  └────────────────────┘      │   │
│  └──────────────────────────────┘   │
└──────────────────────────────────────┘

DevTools'dagi ranglar standart:

• Yashil — content (kontent)
• Sariq — padding (ichki bo'shliq)
• To'q sariq — border (ramka)
• Qizil — margin (tashqi bo'shliq)

Shu yerda qiymatlarni to'g'ridan-to'g'ri panelda o'zgartirish mumkin — raqamlarni bosib, yangilarini kirit. Bu darhol sahifaga qo'llanadi. Tajribalar uchun juda qulay.

Yana bir foydali usul: HTML panelidagi elementga sichqonchani olib borganingda, brauzer uni sahifada rangli to'rtburchaklar bilan ajratib ko'rsatadi — xuddi shu ranglar bilan (yashil kontent, sariq padding, to'q sariq border). Shunday qilib, blok nimalardan tashkil topganini darhol ko'rasan.

Amaliyot: bo'shliqlar va ramkali otkritka

Keling, tabrik otkritkasini yasab ko'ramiz. Unda yumaloqlangan ramka, matn uchun ichki bo'shliqlar va otkritka sahifa chetlariga yopishib qolmasligi uchun tashqi bo'shliq bo'ladi.

Mana to'liq kod. Uni HTML-faylga nusxalab, brauzerda ochishing mumkin:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Otkritka</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Georgia', serif;
    background: #fef3c7;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .card {
    width: 420px;
    background: #fff;
    padding: 40px 36px;
    border: 4px solid #e94560;
    border-radius: 20px;
    margin: 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .card h1 {
    font-size: 2em;
    color: #e94560;
    margin: 0 0 8px;
  }
  .card p {
    color: #555;
    line-height: 1.6;
    font-size: 1.1em;
    margin: 0 0 16px;
  }
  .card .highlight {
    display: inline-block;
    background: #e94560;
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.9em;
  }
</style>
</head>
<body>
  <div class="card">
    <h1>🎉 Yangi yiling bilan!</h1>
    <p>Barcha orzularing ro'yobga chiqsin,<br>sahifa tuzilishi esa siljimasin!</p>
    <div class="highlight">Sevgi bilan, CSS ❤️</div>
  </div>
</body>
</html>

Bu yerda nima sodir bo'lmoqda:

• box-sizing: border-box — padding va border 420px'dan chiqib ketmasligi uchun
• padding: 40px 36px — matn otkritka chetlariga yopishib qolmaydi
• border: 4px solid #e94560 — qizil ramka (surgut muhr kabi)
• border-radius: 20px — otkritka yumshoq ko'rinishi uchun yumaloqlangan burchaklar
• margin: 20px — ekran kichik bo'lsa, oyna chetlaridan bo'shliq
• box-shadow — otkritka fon ustida muallaqdek ko'rinishi uchun soya

Qiymatlarni o'zgartirib ko'r — padding'ni 60px'gacha oshir, border'ni dashed'ga o'zgartir, border-radius bilan o'ynab ko'r. Otkritka qanday o'zgarishini kuzat. Bu blok modelini tushunishning eng yaxshi usuli — tugmachalarni burash va natijaga qarash.

Endi yana bir misolni ko'rib chiqaylik — ikonkali kontaktlar ro'yxati. Bu yerda ro'yxat elementlari qatorda turishi uchun inline-block'dan, ularni barmoq bilan bosish uchun qulay qilish uchun esa padding'dan foydalanamiz:

<div class="contacts">
  <a href="#" class="contact-item">📧 Email</a>
  <a href="#" class="contact-item">📞 Telefon</a>
  <a href="#" class="contact-item">📍 Manzil</a>
</div>

<style>
  .contacts {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .contact-item {
    display: inline-block;
    padding: 16px 28px;
    text-decoration: none;
    color: #333;
    border-right: 1px solid #eee;
    transition: background 0.2s;
  }
  .contact-item:last-child {
    border-right: none;
  }
  .contact-item:hover {
    background: #f5f5f5;
  }
</style>

E'tibor ber: display: inline-block havolalarning bir qatorda bo'lishiga imkon beradi, padding bosish uchun katta maydon beradi (telefonda qulay), border-right esa ularni vizual ravishda ajratadi. Padding bo'lmasa, sichqoncha bilan matnga aniq nishonga olishga to'g'ri kelardi — bu esa noqulay.

Yana bir misol — profil kartochkasi. Bu yerda biz o'rgangan hamma narsani birlashtiramiz:

<div class="profile-card">
  <div class="avatar">👤</div>
  <h2>Anna Ivanova</h2>
  <p class="bio">Veb-dasturchi, CSS'ni yaxshi ko'raman</p>
  <div class="stats">
    <span class="stat">42 ta loyiha</span>
    <span class="stat">128 obunachi</span>
  </div>
</div>

<style>
  .profile-card {
    width: 320px;
    margin: 40px auto;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }
  .avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #fff;
  }
  .profile-card h2 {
    margin: 0 0 4px;
    color: #333;
  }
  .bio {
    color: #777;
    margin: 0 0 20px;
    font-size: 0.95em;
  }
  .stats {
    padding-top: 16px;
    border-top: 1px solid #eee;
  }
  .stat {
    display: inline-block;
    margin: 0 8px;
    padding: 4px 14px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 0.85em;
    color: #555;
  }
</style>

Bu kartochkada biz markazlashtirish uchun margin: 0 auto, ichki bo'shliqlar uchun padding, dumaloq avatar uchun border-radius: 50%, chegara va ajratgich uchun borderdan foydalanamiz. Har bir element — o'z bo'shliqlariga ega to'rtburchak.

Keling, xulosa qilaylik. Mana saqlab qo'yish mumkin bo'lgan blok modeli bo'yicha shpargalka:

/* BLOK MODELI — SHPARGALKA */

/* Ichki bo'shliqlar */
padding: 20px;           /* barcha tomondan */
padding: 10px 30px;      /* yuqori/past   chap/o'ng */
padding: 10px 20px 30px; /* yuqori  chap/o'ng  past */

/* Ramka */
border: 2px solid #e94560;
border-radius: 8px;      /* yumaloqlash */

/* Tashqi bo'shliqlar */
margin: 20px;
margin: 0 auto;          /* gorizontal markazlashtirish */

/* O'lchamlar */
width: 300px;
height: 200px;

/* Najotkor xususiyat */
box-sizing: border-box;

/* Ko'rinish turlari */
display: block;          /* blok — yangi qatordan */
display: inline;         /* satr — qatorda */
display: inline-block;   /* ham qatorda, ham o'lchamlar bilan */

Bu darsdan yodda tutish kerak bo'lgan asosiy narsalar:

• Har bir element — content, padding, border, margin'ga ega to'rtburchak
• padding ichkarida, margin tashqarida, border esa o'rtada
• Odatiy holatda padding va border element o'lchamini kattalashtiradi
• box-sizing: border-box kenglikni bashorat qilinadigan qiladi
• block, inline, inline-block — elementning uchta xatti-harakat rejimi
• DevTools blok modelini vizual tarzda ko'rsatadi — undan foydalan!

Keyingi darsda biz Flexbox'ni ko'rib chiqamiz — bu elementlarni joylashtirish uchun kuchli vosita. Hozircha esa otkritka bilan tajriba qil, qiymatlarni o'zgartir, uni buz va tuzat. Bu o'rganishning eng yaxshi usuli.