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

Quyida box yaratishga misol keltirilgan:


CSS margin xususiyatlari bu elementlar atrofidagi joyni umumlashtirish. Margin xususiyatlari chegara tashqarisidagi oq b''sh joy o'lchamini o'rnatish. Bu elementni 80px (piksel) cheti (margin) bor.
CSS margin xususiyatlari chegara tashqarisidagi oq bo'sh joy 'lchamini belgilaydi.
... Marginlar butunlay transparent(shaffof) - orqa fon rangi yo'q.
CSS bilan, siz marginlarni to'liq ravishda nazorat qilishingiz mumkun.
Bu yerda elementning har bir tarafidan (yuqori, o'ng, past, va chap) margin o'rnatish uchun CSS xususiyatlari

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