Bu maqolamiz blokning ichki va tashqi oraliq masofalariga bag‘ishlanadi, juda kerakli va muhim dars deb hisoblasak bo‘ladi. Blokning o‘z ramkasi(chegarasi)gacha bo‘lgan oraliq masofa va ramkasidan atrofidagi biror ob’yektgacha bo‘lgan masofa kabi xususiyati bor. Bu ikki oraliq masofani tushinish uchun quyidagi rasmni keltirib o‘taman. Bu yerda blok sifatida biror blokli teg(p, div,…) bo‘lishi mumkin.

11css_1
Rasmdan ko‘rinib turibdiki, blokdan o‘z ramkasigacha bo‘lgan masofa «padding» deb, blok ramkasidan biror ob’yekt(element) yoki element mavjud bo‘lmasa hujjat oxirigacha bo‘lgan masofa «margin» deb yuritilar ekan. Bu ikki xususiyatni kod ichida ishlatish, blokni veb sahifada aniq va tushunarli bo‘lishini ta’minlaydi. Misol ko‘ramiz va hammasi tushunarli bo‘ladi

<html>
 <head>
  <title>Margin Padding</title>
  <style>
.p1 {
background-color : gray;
border:1px solid red;
margin:70px;
color:white;
}
.p2 {
background-color : #FFE446;
border:1px solid red;
padding:70px;
}
.p3 {
background-color : #FFE446;
border:1px solid red;
margin:50px;
padding:20px;
}
  </style>
 </head>
 <body>
<p class="p1">Manchester United Football Club</p>
<p>Old trafford stadion</p>
<p class="p3">Rayan Giggs Assistent</p>
 </body>
 </html>

11css_2

Oldingi maqolada ishlatilgan quyidagi kalit so‘zlar ham bu xususiyat uchun ishlaydi:

left — chap tomondan joy qoldirish(margin-left, padding-left)

-right — o‘ng tomondan joy qoldirish(margin-right, padding-right)

top — yuqori qismdan joy qoldirish(margin-top, padding-top)

-bottom — pastki qismdan joy qoldirish(margin-bottom, padding-bottom).

Endi, kalit so‘zlar orqali bo‘sh joy qoldirishga oid misolni ko‘ramiz.

<html>
 <head>
  <title>Margin Padding</title>
  <style>
.d1 {
background-color : gray;
border:1px solid red;
margin-top:70px;
margin-bottom:10px;
color:white;
}
.d2 {
background-color : #FFE446;
border:1px solid red;
padding-left:70px;
padding-right:10px;
}
  </style>
 </head>
 <body>
<p>Eric Contana</p>
<p>Roy Kean</p>
 </body>
 </html>

11css_3

YUqoridagi CSS kodni qisqartirib quyidagicha yozish mumkin:

.d1{margin: 70px  0  10px 0;}
.d1{padding: 0  10px  0  70px;}

Ko‘rinib turibdiki yozilish ketma-ketligi soat yo‘nalishi bo‘yichadir, ya’ni: yuqori qism(top), o‘ng tomon(right), pastki qism(bottom), chap tomon(left).

Qaysi paytda qaysi birini(margin, padding) ishlatishni, o‘zingiz hal qilishingiz kerak, faqat shuni aytishim mumkinki, «padding» blok ichida bo‘ladi, «margin» blok tashqarisida.