10-dars

O'zing nomla

1. display nima?

display — element sahifada QANDAY qatnashishini belgilaydi.

Ya'ni brauzer o'ziga savol beradi:

"Bu element qanday quti (box) bo'lsin?" — to'liq qatormi? — matn ichidami? — umuman ko'rinmasinmi?

display shu qarorni beradi.

Muhim tushuncha (engine fikrlash 🧠)

Brauzer har bir HTML elementni to'rtburchak quti (box) deb ko'radi.

Lekin bu qutilar bir xil emas.

display:

• box yonma-yon bo'ladimi yoki yo'qmi
• width / height ishlaydimi
• margin / padding qanday hisoblanishini aniqlab beradi.

Default (eng muhim joy)

HTML elementlar o'zidan-o'zi displayga ega bo'ladi.

Masalan:

• div → display: block
• p → display: block
• span → display: inline
• a → display: inline

Bu CSS yozmasangiz ham shunday.

❗ Shuning uchun:

"Men hech narsa yozmadim, lekin yonma-yon chiqmayapti" — bu display sababli.

display aslida nimani hal qiladi?

3 ta asosiy savolni:

1. Element yangi qatordan boshlansinmi?
2. Yonida boshqalarni qo'yadimi?
3. width / height ishladimi yoki yo'qmi?

Bularsiz layout bo'lmaydi.

Oddiy misol

<div>Bir</div>
<div>Ikki</div>

Nega pastma-past?

👉 Chunki div default:

div {
  display: block; /* default */
}

1️⃣ display: block — qatorni egallaydigan quti

Block element shunaqa fikrlaydi:

"Men sahifada alohida qatorman"

Xususiyatlari:

• Har doim yangi qatordan boshlanadi
• Butun qatorni egallaydi
• width, height ishlaydi
• margin, padding to'liq ishlaydi

Misollar:

• div
• p
• section
• header

div {
  display: block;
}

👉 Shuning uchun divlar pastma-past chiqadi.

2️⃣ display: inline — matn ichidagi element

Inline element bunday o'ylaydi:

"Men matnning bir bo'lagiman"

Xususiyatlari:

• Yangi qatordan boshlanmaydi
• Faqat kontenti kattaligicha
• width va height ❌ ishlamaydi
• margin-top/bottom ❌ ishlamaydi

Misollar:

• span
• a
• strong
• em

span {
  display: inline;
}

👉 Shuning uchun spanga width: 200px bersang — e'tibor bermaydi.

Engine sabab (eng muhim joy 🧠)

Brauzer layout hisoblayotganda shunday qiladi:

• block → block formatting context
• inline → inline formatting context

Ya'ni:

• Block → qatorlar bo'yicha
• Inline → matn oqimi bo'yicha

Shu sababli:

inline elementga width berib bo'lmaydi chunki u matn kabi hisoblanadi

Vizual misol

<div>DIV</div>
<span>SPAN</span>
<span>SPAN</span>
<div>DIV</div>

Natija:

DIV
SPAN SPAN
DIV

Eng ko'p uchraydigan xato ❌

a {
  width: 200px; /* ishlamaydi */
}

Sabab:

a {
  display: inline; /* default */
}