CSS Margin

CSS Margin


"CSS margin(chet, qirg'oq)" xususiyatlari

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 "< p >" 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;

  • yuqoridagi margin - 25px
  • o'ngdagi margin - 50px
  • pastdagi margin - 75px
  • chapdagi margin - 100px

Agar margin xususiyatini 3ta qiymati bo'lsa:

margin: 25px 50px 75px;

  • yuqoridagi margin - 25px
  • o'ngdagi margin - 50px
  • pastdagi margin - 75px

Agar margin xususiyatini 2ta qiymati bo'lsa:

margin: 25px 50px;

  • yuqoridagi margin - 25px
  • o'ngdagi margin - 50px

Agar margin xususiyatini 1ta qiymati bo'lsa:

margin: 25px;

  • yuqoridagi margin - 25px

auto(avto) qiymatini ishlatilishi

Siz margin xususiyatini autoga konteyneri ichidagi elementni gorizontal ravishda markazga olib kelish uchun o'rnatishingiz mumkun.

Bu element belgilangan kenglikni oladi va bo'sh joy chap va o'ng marginlar o'rtasida teng bo'linadi.

Namuna:

div {
   width: 300px;
   margin: auto;
   border: 1px solid red;
}  

Hamma CSS margin xususiyatlari

Xususiyati Tavsif
margin Margin xususiyatlarini umumiylashtirish uchun bir qisqa xususiyat
margin-bottom Elementning quyi marginini o'rnatadi
margin-left Elementning chap marginini o'rnatadi
margin-right Elementning o'ng marginini o'rnatadi
margin-top Elementning yuqori marginini o'rnatadi

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017