Displey va joylashuv (block, inline, none)

Box model darsida 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.

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

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

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

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

Qaysi element qaysi turga kiradi

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:

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

<style>
.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;
}
</style>

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

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:

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

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

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

display: none — yashirish

none qiymati elementni sahifadan butunlay olib tashlaydi:

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

<style>
p {
  background: #dbeafe;
  padding: 8px;
  margin: 4px 0;
}
.yashirin {
  display: none;
}
</style>

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

Turini o’zgartirish

Har elementning standart turini CSS orqali almashtirish mumkin:

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

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

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.

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 — elementlarni qatorga tizish va tekislashning zamonaviy usuli bilan tanishamiz.