Box model - HTML va CSS | Softromeda Edu

CSS dagi har bir element - to'rtburchak quti. Box model bu qutining tuzilishini tushuntiradi va u CSS ning eng muhim tushunchasi.

To'rt qatlam #

Ichkaridan tashqariga: content, padding, border, margin

Qatlam	Vazifasi	Fon rangi tegadimi
`content`	Matn, rasm	Ha
`padding`	Mazmun bilan chegara orasi	Ha
`border`	Chegara chizig'i	O'z rangi
`margin`	Boshqa elementlar bilan masofa	Yo'q (shaffof)

CSS

.karta {
    width: 300px;
    padding: 20px;
    border: 2px solid #cbd5e1;
    margin: 16px;
}

Bu element ekranda qancha joy egallaydi?

Natija

Kenglik = 300 (content) + 40 (padding) + 4 (border) = 344px
Egallagan joy = 344 + 32 (margin) = 376px

Klassik muammo

CSS

.ustun {
    width: 50%;
    padding: 20px;
}

Ikkita bunday ustunni yonma-yon qo'ysangiz, ular sig'maydi: 50% + 40px + 50% + 40px = 100% + 80px.

Buni box-sizing hal qiladi.

`box-sizing: border-box` #

CSS

/* Standart holat - muammoli */
.standart {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* Haqiqiy kenglik: 344px */
}

/* To'g'ri holat */
.togri {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* Haqiqiy kenglik: aynan 300px */
}

border-box da width - elementning yakuniy kengligi

Har bir loyihani shundan boshlang

CSS

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

Bu bugungi kunda standart amaliyot. Barcha zamonaviy CSS freymvorklar (Bootstrap, Tailwind) shu qatorni o'z ichiga oladi.

`padding` va `margin` yozuvlari #

CSS

.blok {
    /* 4 ta qiymat: yuqori, o'ng, past, chap (soat yo'nalishi) */
    padding: 10px 20px 30px 40px;

    /* 3 ta: yuqori, chap+o'ng, past */
    padding: 10px 20px 30px;

    /* 2 ta: yuqori+past, chap+o'ng */
    padding: 10px 20px;

    /* 1 ta: hamma tomon */
    padding: 20px;

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

    /* Zamonaviy (mantiqiy) xossalar */
    padding-block: 10px;         /* yuqori + past */
    padding-inline: 20px;        /* chap + o'ng */
}

Markazlashtirish #

CSS

.markaz {
    width: 720px;
    margin: 0 auto;      /* chap va o'ng avtomatik - markazga tortadi */
}

/* Maksimal kenglik bilan - kichik ekranda ham to'g'ri ishlaydi */
.orash {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

margin: auto faqat gorizontal markazlashtiradi

Vertikal markazlashtirish uchun auto ishlamaydi. Buning uchun Flexbox (13-bo'lim) yoki Grid (14-bo'lim) kerak.

Margin collapse #

CSS ning eng ko'p chalkashtiradigan xatti-harakati:

HTML

<div class="birinchi">Birinchi blok</div>
<div class="ikkinchi">Ikkinchi blok</div>

CSS

.birinchi  { margin-bottom: 30px; }
.ikkinchi  { margin-top: 20px; }

Ular orasidagi masofa qancha? 50px emas, 30px.

Vertikal margin lar qo'shilmaydi - kattarog'i tanlanadi

Qachon margin birlashadi?

Faqat vertikal (yuqori/past) margin lar. Gorizontal hech qachon birlashmaydi.
Faqat oddiy oqimda turgan elementlarda.

Birlashmaydi:

Flex yoki Grid konteyner ichida
position: absolute bo'lsa
overflow visible dan boshqa bo'lsa
Orasida padding yoki border bo'lsa

Eng oddiy yechim: bir tomonlama margin ishlating - masalan faqat margin-bottom. Yoki umuman Flexbox gap ga o'ting (13-bo'lim).

Chegara (border) #

CSS

.blok {
    /* Qisqa yozuv: qalinlik, uslub, rang */
    border: 2px solid #cbd5e1;

    /* Alohida tomonlar */
    border-top: 3px solid #2563eb;
    border-bottom: 1px dashed #94a3b8;

    /* Yumaloqlash */
    border-radius: 12px;
    border-radius: 12px 0 12px 0;      /* har bir burchak alohida */
    border-radius: 50%;                 /* doira */
}

`border-style`	Ko'rinishi
`solid`	To'liq chiziq
`dashed`	Chiziqcha
`dotted`	Nuqta
`double`	Ikki chiziq
`none`	Yo'q

outline - chegaraga o'xshash, lekin joy egallamaydi

CSS

button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

outline box model ga kirmaydi - u element o'lchamini o'zgartirmaydi. Shuning uchun fokus ko'rsatkichi uchun ideal.

Muhim: outline: none yozib fokus ko'rsatkichini o'chirmang - klaviatura bilan ishlaydigan foydalanuvchilar qayerda ekanini bilmay qoladi.

O'lcham xossalari #

CSS

.blok {
    width: 300px;
    height: 200px;

    min-width: 200px;        /* bundan kichik bo'lmaydi */
    max-width: 100%;         /* bundan katta bo'lmaydi */
    min-height: 100vh;       /* kamida ekran balandligi */
    max-height: 400px;

    /* Zamonaviy: mos keladigan o'lcham */
    width: fit-content;
    width: min-content;
    width: max-content;
}

max-width: 100% - rasmlar uchun majburiy

CSS

img {
    max-width: 100%;
    height: auto;
}

Usiz katta rasm konteynerdan tashqariga chiqib ketadi va sahifada gorizontal aylantirish paydo bo'ladi.

Overflow #

CSS

.blok {
    overflow: visible;    /* standart - tashqariga chiqadi */
    overflow: hidden;     /* kesiladi */
    overflow: scroll;     /* har doim aylantirgich */
    overflow: auto;       /* kerak bo'lganda aylantirgich */

    overflow-x: auto;     /* faqat gorizontal */
    overflow-y: hidden;
}

Amaliy misol: kartochka #

CSS

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

.karta {
    max-width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;               /* rasm burchaklarini yumaloqlaydi */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.karta__rasm {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;              /* nisbatni buzmasdan qoplaydi */
}

.karta__tana {
    padding: 1.25rem;
}

.karta__sarlavha {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.3;
}

.karta__matn {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.925rem;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.karta__tugma {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.karta__tugma:hover {
    background: #1d4ed8;
}

.karta__past {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.825rem;
    color: #94a3b8;
}

HTML

<article class="karta">
    <img class="karta__rasm" src="rasmlar/python.jpg" alt="Python darsligi muqovasi">
    <div class="karta__tana">
        <h3 class="karta__sarlavha">Python dasturlash tili</h3>
        <p class="karta__matn">
            Noldan boshlab amaliy loyihagacha - 20 bosqichli to'liq qo'llanma.
            Barcha misollar o'zbek tilida yozilgan.
        </p>
        <a class="karta__tugma" href="/darslik/python">O'qishni boshlash</a>
    </div>
    <div class="karta__past">20 bo'lim &middot; 8 soat</div>
</article>

object-fit - rasmlar uchun juda foydali

Turli o'lchamdagi rasmlarni bir xil o'lchamda ko'rsatish kerak bo'lganda:

cover - qoplaydi, chetlari kesiladi (nisbat saqlanadi)
contain - to'liq sig'adi, bo'sh joy qoladi
fill - cho'zadi, nisbat buziladi

Amaliy topshiriq

Barcha loyihalaringizga box-sizing: border-box qo'shing.
Uchta kartochka yarating: rasm, sarlavha, matn va tugma bilan.
DevTools da elementni tanlab, Computed bo'limidagi box model diagrammasini ko'ring.
padding: 20px va margin: 20px orasidagi farqni fon rangi bilan ko'rsating.
Margin collapse ni sinab ko'ring: ikkita blok, margin-bottom: 40px va margin-top: 20px. Orasidagi masofani o'lchang. So'ng ota elementga display: flex qo'shib, farqni ko'ring.
border-radius: 50% bilan doira shaklidagi avatar yarating.

Xulosa #

Har bir element - to'rt qatlamli quti: content, padding, border, margin.
margin shaffof, padding esa fon rangini oladi.
box-sizing: border-box ni har bir loyihada birinchi qator qilib yozing.
margin: 0 auto blokni gorizontal markazlashtiradi (vertikal emas).
Margin collapse: vertikal margin lar qo'shilmaydi, kattarog'i qoladi.
outline box model ga kirmaydi - fokus ko'rsatkichi uchun ideal, uni o'chirmang.
img { max-width: 100%; height: auto; } - rasmlar uchun majburiy juftlik.

Keyingi bo'limda elementlarni sahifada joylashtirishni - display va position ni o'rganamiz.

To'rt qatlam #

box-sizing: border-box #

padding va margin yozuvlari #

Markazlashtirish #

Margin collapse #

Chegara (border) #

O'lcham xossalari #

Overflow #

Amaliy misol: kartochka #

Xulosa #

Xatolik topdingizmi?

`box-sizing: border-box` #

`padding` va `margin` yozuvlari #