Mavzu: css rang berish usullari, chegara, orqa fon, shrift, margin va padding xususiyatlari. Box model tushunchasi. Box model qoidalari. (2 soat)

Margin - Alohida tomonlari

CSS bir elementning har tomonidagi chekka bo'shlig'ni aniqlash uchun xususiyatlarga ega:

• 
  margin-top(yuqori)
  
• 
  margin-right(o'ng)
  
• 
  margin-bottom(tub)
  
• 
  margin-left(chap)
  

Hamma margin xususiyatlari quyidagi qiymatlarga ega bo'lishi mumkin:
auto(avto) - brauzer marginni hisoblaydi
length(uzunlik) - marginni px, pt, cm va boshqalardagi marginni bildiradi.
% - marginni elementning kengligini % (foiz)idaligini bildiradi.
inherit(me'ros) - marginni ota elementdan ko'rinishi bir hil bo'lib qolganligini bildiradi
... Marginlar uchun manfiy qiymatlarni ham foydalanish mumkin; kontentni qoplashga.
Quyidagi misol "
" elementning to'rt tomoni uchun turli hil marginlarni o'rnatadi.
Namuna:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Quyidagi misol chap margin ota elementdan meros bo'lib o'tgan:
Namuna:
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}

Margin - Qisqacha(oson) xususiyatilari

Kodni kamaytirish uchun hamma margin xususiyatlarini bitta qilib olish mumkun.
margin quyidagi alohida margin xususiyatlari uchun qisqacha xususiyat hisoblanadi:

• 
  margin-top
  
• 
  margin-right
  
• 
  margin-bottom
  
• 
  margin-left
  

Namuna:
p {
margin: 100px 150px 100px 80px;
}
Bu yerda qanday uni ishlashi
Agar margin xususiyatini 4ta qiymati bo'lsa:
margin: 25px 50px 75px 100px;

1. 
   yuqoridagi margin - 25px
   
2. 
   o'ngdagi margin - 50px
   
3. 
   pastdagi margin - 75px
   
4. 
   chapdagi margin - 100px