Quti modeli: margin, border, padding

Brauzer uchun sahifadagi har bir element — to'rtburchak quti: sarlavha ham, xatboshi ham, rasm ham, havola ham. Elementlar orasidagi masofani, chegaralarni va o'lchamlarni boshqarish uchun shu qutining qanday tuzilganini bilish kerak. Bu — CSS'dagi eng muhim mavzulardan biri.

Har bir element — quti

Ishonmayapsizmi? Quyidagi sahifada universal selektor * yordamida hamma elementlar atrofiga chiziq chizilgan. outline — chegaraga o'xshash chiziq, lekin u joy egallamaydi, shuning uchun tekshirib ko'rish uchun qulay:

<style>
  body { font-family: sans-serif; }
  * { outline: 2px solid tomato; }
</style>

<h1>Mening sahifam</h1>
<p>Bu xatboshida <a href="#">havola</a> va
<strong>qalin so'z</strong> bor.</p>
<img src="../assets/rasmlar/olma.svg" alt="Olma" width="80">
<ul>
  <li>Birinchi band</li>
  <li>Ikkinchi band</li>
</ul>

Sarlavha ham, havola ham, rasm ham, ro'yxat bandlari ham — hammasi to'rtburchak. Hatto butun sahifa (body) ham bitta katta quti.

Quti modeli

Har bir quti to'rt qatlamdan iborat. Ichkaridan tashqariga qarab:

1. Mazmun (inglizcha content) — matn, rasm yoki ichki elementlar. Uning o'lchami width va height bilan beriladi.
2. Ichki oraliq (inglizcha padding) — mazmun bilan chegara orasidagi bo'sh joy. Elementning fon rangi shu qismga ham yoyiladi.
3. Chegara (inglizcha border) — qutining chizig'i.
4. Tashqi oraliq (inglizcha margin) — chegaradan tashqaridagi bo'sh joy, ya'ni qo'shni elementlargacha masofa. U doim shaffof: fon rangi bu yerga yetib bormaydi.

<style>
  body { font-family: sans-serif; }
  .quti {
    background-color: #dcf1ef;   /* fon padding'ga ham yoyiladi */
    padding: 20px;               /* ichki oraliq */
    border: 4px solid #0a7c77;   /* chegara */
    margin: 30px;                /* tashqi oraliq */
  }
</style>

<div class="quti">Men qutiman. Atrofimdagi oraliqlarga qarang!</div>
<div class="quti">Men ham qutiman.</div>

Qiymatlarni o'zgartirib ko'ring: padding: 0 qilsangiz, matn chegaraga yopishib qoladi; margin: 0 qilsangiz, qutilar bir-biriga tegib turadi.

width va height

width — kenglik, height — balandlik. Standart holatda ular aynan mazmun qismining o'lchamini belgilaydi (buni pastda o'zgartiramiz). Blok element sukut bo'yicha butun kenglikni egallaydi, balandligi esa mazmunga qarab o'zi o'sadi.

padding — ichki oraliq

padding ni har bir tomonga alohida berish mumkin: padding-top, padding-right, padding-bottom, padding-left. Lekin ko'pincha qisqa yozuv ishlatiladi — bitta qatorda 1 dan 4 tagacha qiymat:

To'rtta qiymat tartibini soat mili bilan eslab qolish oson: soat 12 dan boshlanadi — tepa, keyin 3 — o'ng, 6 — past, 9 — chap.

<style>
  body { font-family: monospace; }
  div { background: #e2eafa; border: 1px solid #1f4fa8;
        margin: 8px 0; }
  .a { padding: 10px; }
  .b { padding: 10px 40px; }
  .c { padding: 0 0 30px 80px; }
</style>

<div class="a">padding: 10px</div>
<div class="b">padding: 10px 40px</div>
<div class="c">padding: 0 0 30px 80px</div>

Uchinchi qutida tepa va o'ng tomonda oraliq yo'q, pastda 30px, chapda esa 80px. Nolga birlik yozish shart emas: 0 — 0px bilan bir xil.

border — chegara

border uchta qiymatni birga oladi: qalinlik, chiziq turi va rang — border: 2px solid #1f4fa8;. Chiziq turlari: solid (yaxlit), dashed (uzuq), dotted (nuqtali), double (qo'sh), none (yo'q). Faqat bitta tomonga ham berish mumkin: border-bottom: 3px solid tomato; — sarlavha tagidagi chiziq uchun qulay.

border-radius — yumaloq burchaklar va doira

border-radius: 12px; burchaklarni yumaloqlaydi. U chegara bo'lmasa ham ishlaydi — fonning burchaklari yumaloqlanadi. Kvadrat elementga border-radius: 50%; bersangiz, doira hosil bo'ladi. Profil rasmlari aynan shunday yasaladi.

<style>
  body { font-family: sans-serif; }
  .q { display: inline-block; width: 110px; padding: 16px 0;
       margin: 6px; text-align: center; background: #f9eed5; }
  .solid   { border: 3px solid #8f5d00; }
  .dashed  { border: 3px dashed #8f5d00; }
  .dotted  { border: 3px dotted #8f5d00; }
  .double  { border: 6px double #8f5d00; }
  .past    { border-bottom: 4px solid tomato; }
  .yumaloq { border: 3px solid #8f5d00; border-radius: 16px; }
  .avatar  { width: 100px; height: 100px; border-radius: 50%;
             border: 4px solid #0a7c77; }
</style>

<div class="q solid">solid</div>
<div class="q dashed">dashed</div>
<div class="q dotted">dotted</div>
<div class="q double">double</div>
<div class="q past">faqat past</div>
<div class="q yumaloq">radius 16px</div>
<p><img class="avatar" alt="Profil"
        src="../assets/rasmlar/avatar.svg"></p>

margin — tashqi oraliq

margin xuddi padding kabi yoziladi: margin: 20px;, margin: 10px 0;, margin-top: 30px; va hokazo. Farqi — u chegaradan tashqarida va doim shaffof.

margin: auto — blokni markazga

Blok elementga aniq kenglik (width yoki max-width) berib, chap va o'ng margin'ni auto qilsangiz, brauzer qolgan bo'sh joyni ikki tomonga teng bo'lib beradi — element markazga keladi: margin: 0 auto;.

Margin'larning «qo'shilib ketishi»

Ikki blok element ustma-ust tursa, birinchisining pastki va ikkinchisining yuqori margin'i qo'shilmaydi — ulardan kattasi olinadi. 30px va 20px bo'lsa, orasida 50px emas, 30px bo'ladi. Bu margin collapse («margin'larning qo'shilib ketishi») deyiladi va faqat vertikal (tepa-past) margin'larga tegishli. «Nega oraliq kutganimdan kichik?» degan savolning javobi ko'pincha shu.

<style>
  body { font-family: sans-serif; }
  .markaz { width: 260px; margin: 0 auto; padding: 12px;
            background: #e2eafa; text-align: center; }
  p { margin: 0; padding: 8px; }
  .bir  { margin-bottom: 30px; background: #dcf1ef; }
  .ikki { margin-top: 20px; background: #f9eed5; }
</style>

<div class="markaz">Men markazdaman: margin: 0 auto</div>
<p class="bir">margin-bottom: 30px</p>
<p class="ikki">margin-top: 20px — oramiz 50px emas, 30px!</p>

box-sizing: border-box — o'lchamni oson hisoblash

Standart holatda width — faqat mazmun qismining kengligi. padding va border esa unga qo'shiladi:

width: 300px;  padding: 20px;  border: 2px solid;

Ko'rinadigan kenglik = 300 + 20 + 20 + 2 + 2 = 344px

«300px» deb yozib, 344 piksellik quti olish — chalkash. Buni box-sizing xususiyati hal qiladi:

• content-box (standart) — width = faqat mazmun. padding va border ustiga qo'shiladi.
• border-box — width = butun quti, chegarasi bilan birga. padding va border ichkariga «siqiladi», mazmun esa shunga yarasha kichrayadi. 300px deb yozsangiz — aynan 300px bo'ladi.

<style>
  body { font-family: sans-serif; }
  .chizgich { width: 300px; height: 6px; background: tomato; }
  .quti { width: 300px; padding: 20px; margin: 8px 0;
          border: 2px solid #1f4fa8; background: #e2eafa; }
  .bb { box-sizing: border-box; }
</style>

<p>Qizil chiziq — aniq 300px:</p>
<div class="chizgich"></div>
<div class="quti">content-box: 300 + 40 + 4 = 344px</div>
<div class="quti bb">border-box: aynan 300px</div>

* {
  box-sizing: border-box;
}

DevTools'dagi quti diagrammasi

DevTools'da (F12) elementni tanlang va Styles yonidagi Computed bo'limini oching. Tepada tanlangan elementning quti modeli rangli diagramma ko'rinishida chizilgan: tashqarida margin (to'q sariq), keyin border (sariq), padding (yashil) va markazda mazmun (ko'k) — har birining aniq o'lchami bilan. Diagrammadagi qatlam ustiga sichqonchani olib borsangiz, sahifada aynan shu qism bo'yab ko'rsatiladi. «Nega bu yerda bo'sh joy bor?» degan savolga eng tez javob — shu diagramma.

display: block, inline va inline-block

7-darsda elementlar blok va qator ichidagi bo'lishini ko'rgan edik. Bu xulqni display xususiyati boshqaradi va uni o'zgartirish mumkin:

display: none; esa elementni butunlay yashiradi — u joy ham egallamaydi.

<style>
  body { font-family: sans-serif; line-height: 1.6; }
  p { max-width: 400px; }
  span { background: #f9eed5; border: 2px solid #8f5d00;
         width: 120px; padding: 14px; }
  .blok   { display: block; }
  .qatorb { display: inline-block; }
</style>

<p>Bu matnda oddiy <span>inline</span> element bor. Unga width
ta'sir qilmadi, tepa-past padding esa qo'shni qatorlarni surmadi —
ularning ustiga «chiqib» ketdi.</p>
<p>Bu <span class="blok">block</span> — alohida qatorga tushdi.</p>
<p>Bu <span class="qatorb">inline-block</span> — qator ichida qoldi,
lekin width va padding to'liq ishlaydi.</p>

Tugma ko'rinishidagi havolalar uchun inline-block ayni muddao: ular matn qatorida turadi, lekin ichki oraliqlari to'g'ri ishlaydi.

Foydali qo'shimchalar

max-width — o'qishga qulay kenglik

Juda uzun qatorlarni o'qish qiyin: ko'z bir qator oxiridan keyingisining boshiga o'tishda adashadi. Matnli bloklarga max-width bering — «kengligi shundan oshmasin, ekran tor bo'lsa — torayaversin». Qulay kenglik — bir qatorda taxminan 60–80 belgi, ya'ni 600–700px atrofida. width dan farqi: width: 700px telefon ekranidan chiqib ketadi, max-width: 700px esa ekranga moslashib torayadi.

overflow — sig'magan mazmun

Mazmun qutiga sig'masa (masalan, height berilgan bo'lsa), overflow nima qilishni hal qiladi: visible (standart — chiqib ketadi), hidden (sig'magan qism kesib tashlanadi), auto (kerak bo'lsa, aylantirish chizig'i paydo bo'ladi).

box-shadow — quti soyasi

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); — o'ngga siljish, pastga siljish, xiralik va rang. text-shadow ga o'xshaydi, lekin butun qutiga tushadi. Yengil, shaffof soya kartani sahifadan biroz «ko'tarib» turadi.

<style>
  body { font-family: sans-serif; background: #f4f6fa; }
  .maqola { max-width: 420px; margin: 0 auto 16px;
            padding: 12px 16px; background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  .kichik { height: 50px; overflow: auto; }
</style>

<div class="maqola">max-width: 420px — oyna kengaysa ham, bu blok
shundan kengaymaydi va markazda turadi. Yengil soya kartani
«ko'tarib» turibdi.</div>
<div class="maqola kichik">overflow: auto — bu qutining balandligi
50px, matn esa ko'proq. Shuning uchun ichida aylantirish chizig'i
paydo bo'ldi. Sichqoncha g'ildiragi bilan aylantirib ko'ring.
Yana bir qator. Va yana bittasi. Oxiri!</div>

Loyiha: profil kartasi

Endi o'rganganlarimizni bitta foydali qismga — profil kartasiga yig'amiz. HTML juda oddiy: rasm, ism, qisqa matn va tugma. Butun «sehr» — CSS'da. Kodni qadamlarga bo'lib, izoh bilan belgiladik:

<style>
  /* 1-qadam: o'lchamlarni oson hisoblash */
  * { box-sizing: border-box; }
  body { font-family: sans-serif; background: #f4f6fa; }

  /* 2-qadam: karta — markazdagi oq quti */
  .karta {
    max-width: 300px;
    margin: 16px auto;
    padding: 24px;
    background: white;
    border: 1px solid #d6dde9;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(21, 32, 54, 0.12);
    text-align: center;
  }
  /* 3-qadam: doira shaklidagi rasm */
  .avatar { width: 96px; height: 96px; border-radius: 50%;
            border: 4px solid #e2eafa; }
  /* 4-qadam: matn oraliqlari */
  .karta h2 { margin: 12px 0 4px; color: #152036; }
  .karta p  { margin: 0 0 20px; color: #4a5770; line-height: 1.5; }
  /* 5-qadam: tugma */
  .tugma { display: inline-block; padding: 10px 22px;
           background: #1f4fa8; color: white; text-decoration: none;
           border-radius: 999px; transition: background-color 0.3s; }
  .tugma:hover { background: #0a7c77; }
</style>

<div class="karta">
  <img class="avatar" src="../assets/rasmlar/avatar.svg" alt="Aziza">
  <h2>Aziza Karimova</h2>
  <p>Boshlovchi veb-dasturchi. HTML va CSS o'rganyapman.</p>
  <a class="tugma" href="#">Bog'lanish</a>
</div>

1. box-sizing: border-box — max-width: 300px deb yozdik, karta chegarasi bilan birga aynan shuncha bo'ladi.
2. Karta: max-width + margin: 16px auto — markazda, tepa va pastda 16px oraliq bilan; padding — ichki «havo»; border, border-radius va box-shadow — karta ko'rinishi.
3. Rasm: kvadrat (96 × 96) + border-radius: 50% = doira.
4. Matn: brauzerning standart margin'lari o'rniga o'zimiznikini berdik — sarlavha rasmga yaqinroq, matndan keyin tugmagacha 20px.
5. Tugma: inline-block bo'lgani uchun padding to'liq ishlaydi; border-radius: 999px — juda katta radius, burchaklar to'liq yumaloqlanib, «tabletka» shakli chiqadi.

Mashqlar

<style>
  body { font-family: sans-serif; }
  .karta {
    background: #dcf1ef;
    /* shu yerga yozing */
  }
</style>

<div class="karta">
  <h3>Eslatma</h3>
  <p>Ertaga soat 10:00 da CSS darsi bor.</p>
</div>

<style>
  body { font-family: sans-serif; }
  .karta {
    background: #dcf1ef;
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #0a7c77;
    border-radius: 12px;
  }
</style>

<div class="karta">
  <h3>Eslatma</h3>
  <p>Ertaga soat 10:00 da CSS darsi bor.</p>
</div>

<style>
  body { font-family: sans-serif; }
  .xabar {
    width: 220px;
    padding: 16px;
    background: #f9eed5;
    border: 2px solid #8f5d00;
    text-align: center;
  }
</style>

<div class="xabar">Men sahifa markazida turishim kerak!</div>

<style>
  body { font-family: sans-serif; }
  .xabar {
    width: 220px;
    padding: 16px;
    background: #f9eed5;
    border: 2px solid #8f5d00;
    text-align: center;
    margin: 40px auto;
  }
</style>

<div class="xabar">Men sahifa markazida turishim kerak!</div>

O'zingizni sinang