Blokga oid xususiyatlarni ko‘rib chiqishni davom ettiramiz, bu safar yana bir asosiy xususiyatlardan biri, blokning balandligi(height) va uning uzunligi(width) haqida gaplashamiz. Agar sezgan bo‘lsangiz, blokning uzunligi va balandligi avtomat aniqlashtiriladi, yozuv qancha katta bo‘lsa(yoki blokni boshqa tashkil etuvchi),  shuncha blokning uzunlik va balandlik katta bo‘ladi.

Shunday bo‘lsa ham, biz CSS orqali blokning uzunlik va balandligini o‘zimiz o‘rnatishimiz mumkin. Demak bu ish uchun biz quyidagi ikkita xususiyatdan foydalanamiz:

height — blokning balandligi;

width — blokning uzunligi.

Odatda, CSS da blok siftida «div» tegi ishlatiladi, lekin paragraf(p tegi), ro‘yxatlarni ham blok sifatida ishlatish mumkin.

Nazariy ma’lumotlar bilan tanishib chiqdik, endi misol ko‘ramiz.

<html>
 <head>
  <title>WH</title>
  <style>
.mu1 {
width: 100px;
border: 1px solid red;
background: #FFE446;
}
.mu2 {
height: 70px;
border: 1px solid red;
background: #FFE446;
}
.mu3 {
width: 75px;
height: 120px;
border: 1px solid red;
background: #FFE446;
}
.mu4 {
width: 30px;
height: 30px;
border: 1px solid red;
background: #FFE446;
}
  </style>
 </head>
 <body>
<p class="mu1">England champion football club - Manchester United football club!</p>
<p class="mu2">Eric Contana</p>
<p class="mu3">Wayne Rooney</p>
<p class="mu4">Phile John</p>
</body>
</html>

12css_1

Har xil o‘lchamdagi bloklar hosil qildik, agar biz yozgan yozuv blok ichiga sig‘masa, ko‘rib turganingizdek blok tashqarisida ham yozuvning davomi yozilaverar ekan. Shuning uchun bloklar hosil qilishda hamma narsalarni hisobga oling.

Blok uzunligi va balandligini berish bilan  siz, faqat yozuv uchun ajratilgan joyni aniqlashtirgan bo‘lasiz, oraliq masofalarni belgilovchi CSS xususiyatlar(margin, padding) bu o‘lchamlarga kirmaydi. Siz kiritgan o‘lchamdan keyin, o‘rnatgan oraliq masofa qiymatichalik joy tashlab ketiladi, rasmda ko‘radigan bo‘lsak,

12css_2

YUqoridagi o‘lcham beruvchi CSS xususiyatlardan tashqari yana quyidagi o‘lchov beruvchi xususiyatlar mavjud:

max-width — blokning maksimal uzunligi;

min-width — blokning minimal uzunligi;

max-height — blokning maksimal balandligi;

min-height — blokning minimal balandligi.

Bu xususiyatlar blokning maksimal va minimal o‘lchovlarini aniqlashtirib beradi, biror kod orqali bu maksimal va minimal o‘lchovlardan chetga chiqib bo‘lmaydi. Beriladigan o‘lchovlar faqat shu oraliqga tushishi lozim. Misol,

.size {
height:80px;
width:600px;
max-width: 300px;
border:1px solid red;
background-color:orange;
}

 Bu holda blok uzunligi 300 piksel bo‘ladi, biz o‘rnatgan 600 piksel ishlamaydi.

Menimcha hammasi tushunarli, tushunarsiz narsalar pochta yoki kommentariyada ko‘rib chiqiladi.