# Displey va joylashuv (block, inline, none)

> CSS display xossasi: block, inline, inline-block va none farqi. Elementlar sahifada qanday joylashadi va ularni qanday yashirish mumkin — jonli misollarda.

Manba: https://learncode.uz/html-css/displey-joylashuv/
Sana: 2026-05-22

[Box model darsida](https://learncode.uz/html-css/box-model) har element quti ekanini ko'rdik.
Endi navbatdagi savol: bu qutilar sahifada **qanday joylashadi**? Nega ba'zi
elementlar butun qatorni egallaydi, boshqalari esa yonma-yon turadi?

Javob `display` xossasida.

Bu dars yakunida block va inline qutilarning normal oqimdagi farqini
tushuntirasiz, `inline-block` bilan o'lcham berasiz, `display: none` va
`visibility: hidden` natijasini taqqoslaysiz hamda vazifaga mos display
qiymatini tanlaysiz.

## Ikki asosiy xatti-harakat

HTML elementlari standart holatda ikki guruhga bo'linadi.

```html
<div class="blok">Birinchi div</div>
  <div class="blok">Ikkinchi div</div>

  <span class="satr">Birinchi span</span>
  <span class="satr">Ikkinchi span</span>
```

```css
.blok {
    background: #dbeafe;
    border: 1px solid #3b82f6;
    padding: 8px;
    margin-bottom: 4px;
  }
  .satr {
    background: #fee2e2;
    border: 1px solid #ef4444;
    padding: 8px;
  }
```

Farqni ko'rdingiz: `div` lar ustma-ust, `span` lar esa yonma-yon turibdi.

> **Atama**
>
> **Block** quti odatda yangi qatordan boshlanadi; `width: auto` holatida ota
> elementdagi mavjud gorizontal joyni to'ldiradi. **Inline** quti esa matn oqimi
> ichida mazmuni qadar joy oladi va qo'shnisi bilan bir qatorda turadi.

## Qaysi element qaysi turga kiradi

| Block | Inline |
|-------|--------|
| `<div>` | `<span>` |
| `<p>` | `<a>` |
| `<h1>`–`<h6>` | `<strong>`, `<em>` |
| `<ul>`, `<li>` | `<img>` |
| `<section>`, `<header>` | `<label>` |

Bu tabiiy: sarlavha va paragraf alohida qatorda turishi kerak, havola esa
matn ichida oqib ketishi lozim.

## Inline elementning cheklovi

Inline elementda muhim cheklov bor — `width` va `height` uning ishlatiladigan
quti o'lchamini belgilamaydi:

```html
<span class="urinish">Kenglik berilgan span</span>
  <div class="ishlaydi">Kenglik berilgan div</div>
```

```css
.urinish {
    background: #fee2e2;
    width: 300px;
    height: 80px;
    border: 1px solid #ef4444;
  }
  .ishlaydi {
    background: #dbeafe;
    width: 300px;
    height: 80px;
    border: 1px solid #3b82f6;
    margin-top: 8px;
  }
```

`span` ga `width: 300px` berildi, lekin u e'tiborsiz qoldirildi. `div` esa
buyruqni bajardi.

> **Diqqat**
>
> Inline elementda `width` va `height` ishlatiladigan o'lchamni bermaydi.
> Gorizontal margin/padding matn oqimiga ta'sir qiladi; vertikal padding va
> margin chizilishi mumkin, ammo satr qutisini block elementdagidek surmaydi va
> qo'shni satr ustiga chiqishi mumkin. Nazoratli o'lcham kerak bo'lsa,
> `inline-block`, flex yoki grid tanlang.

## `inline-block` — ikkovining o'rtasi

Ba'zan elementlar **yonma-yon** turishi, lekin ayni paytda **o'lchamga ega**
bo'lishi kerak. Masalan tugmalar qatori. Buning uchun `inline-block` bor:

```html
<span class="tugma">Bosh sahifa</span>
  <span class="tugma">Darslar</span>
  <span class="tugma">Aloqa</span>
```

```css
.tugma {
    display: inline-block;
    width: 120px;
    padding: 10px;
    background: #2563eb;
    color: white;
    text-align: center;
    border-radius: 6px;
  }
```

Elementlar bir qatorda turibdi va har biri aniq 120px kenglikda.

| Qiymat | Qatorda | O'lcham beriladimi |
|--------|:---:|:---:|
| `block` | yo'q — butun qator | ✅ |
| `inline` | ✅ | ❌ |
| `inline-block` | ✅ | ✅ |

## `display: none` — yashirish

`none` qiymati elementni sahifadan butunlay olib tashlaydi:

```html
<p>Birinchi paragraf</p>
  <p class="yashirin">Bu ko'rinmaydi</p>
  <p>Uchinchi paragraf</p>
```

```css
p {
    background: #dbeafe;
    padding: 8px;
    margin: 4px 0;
  }
  .yashirin {
    display: none;
  }
```

E'tibor bering: yashirilgan element **joy ham egallamaydi** — qolgan
paragraflar bir-biriga yaqinlashdi.

> **Yodda tuting**
>
> Elementni yashirishning ikki usuli bor va ular farq qiladi:
>
> - `display: none` — element yo'q, joy ham egallamaydi.
> - `visibility: hidden` — element ko'rinmaydi, lekin **joyi bo'sh qoladi**.
>
> `display: none` elementni accessibility daraxtidan ham olib tashlaydi. Menyu
> ochib-yopilsa, holatni boshqaradigan haqiqiy `<button>`, `aria-expanded` va
> klaviatura fokusini ham to'g'ri boshqarish kerak; faqat CSS bilan yashirish
> to'liq accessible menyu yaratmaydi.

## Turini o'zgartirish

Har elementning standart turini CSS orqali almashtirish mumkin:

```html
<ul class="menyu">
    <li>Bosh sahifa</li>
    <li>Darslar</li>
    <li>Aloqa</li>
  </ul>
```

```css
.menyu {
    list-style: none;
    padding: 0;
  }
  .menyu li {
    display: inline-block;
    padding: 8px 16px;
    background: #e0e7ff;
    margin-right: 4px;
    border-radius: 4px;
  }
```

`li` odatda block quti — ro'yxat tik joylashadi. `inline-block` bergach,
bandlar gorizontal ko'rindi. Bu tarixiy va kichik demo uchun foydali usul;
haqiqiy moslashuvchan navbar uchun keyingi darsdagi Flexbox odatda qulayroq.

> **Diqqat**
>
> Elementning `display` turini o'zgartirish uning **ma'nosini** o'zgartirmaydi.
> `<div>` ga `display: list-item` bersangiz ham, u ro'yxat elementi bo'lmaydi —
> qidiruv tizimlari va ekran o'quvchilari uchun u baribir oddiy `div`.
> Shuning uchun [semantik teglarni](https://learncode.uz/html-css/semantik-teglar) to'g'ri tanlang,
> ko'rinishni esa CSS bilan sozlang.

## Amaliy mashq

Uchta `span` yarating va ularga navbat bilan `inline`, `inline-block` va
`block` bering. Bir xil width, padding va margin qiymatlarida natijani
solishtiring. So'ng alohida elementda `display: none` va
`visibility: hidden` ni almashtirib, joy hamda accessibility farqini izohlang.

## Qisqacha xulosa

- `display` elementning sahifada qanday joylashishini belgilaydi.
- **block** — odatda yangi qator va mavjud kenglik, o'lcham beriladi.
- **inline** — matn oqimida mazmun qadar; width/height qutini belgilamaydi.
- **inline-block** — yonma-yon turadi **va** o'lcham qabul qiladi.
- `display: none` elementni butunlay olib tashlaydi, joyi ham qolmaydi.
- `visibility: hidden` esa yashiradi, lekin joyini saqlaydi.
- Ko'rinishni o'zgartirish teg ma'nosini o'zgartirmaydi.

Keyingi darsda [Flexbox asoslari](https://learncode.uz/html-css/flexbox) — elementlarni qatorga
tizish va tekislashning zamonaviy usuli bilan tanishamiz.