CSS margin

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;

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

Agar margin xususiyatini 3ta qiymati bo'lsa:

margin: 25px 50px 75px;

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

Agar margin xususiyatini 2ta qiymati bo'lsa:

margin: 25px 50px;

1. yuqoridagi margin - 25px
2. o'ngdagi margin - 50px

Agar margin xususiyatini 1ta qiymati bo'lsa:

margin: 25px;

1. yuqoridagi margin - 25px

auto(avto) qiymatini ishlatilishi

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

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

Tutorials.uz - telegram kanali O'zbekiston bo'ylab bepul dasturlash darslarini ishlab chiquvchi holis kanal.