CSS Marginlar

Last updated 1 year ago

Marginlar berilgan chegaralarning tashqarisidagi elementlar atrofida bo'sh joy hosil qilish uchun ishlatiladi.

CSSning margin xususiyatlari elementlar atrofida, belgilangan chegaraning tashqi qismida bo'sh joy hosil qilish uchun ishlatiladi

CSS yordamida marginlarni boshqara olasiz. Elementning har bir tomoni (tepa, o'ng, pastki va chap) uchun alohida margin berish xususiyatlari mavjud.

Margin - Alohida tomonlar

CSS elementning har bir tomoniga margin berish uchun bir nechta xususiyatlarga ega:

Barcha margin xususiyatlari quyidagi qiymatlarni o'z ichiga oladi:

auto - marginni brauzerning o'zi hisoblaydi
length - margin qiymatlari px, pt, cm, va hokazolar asosida belgilanadi
% - margin qiymatlarini o'z ichiga olgan elementlarning kengligini % da hisoblaydi
inherit - ota elementdagi qiymatni meros qilib oladi

Maslahat: Negativ qiymatlarga ruxsat beriladi

<p> elementining barcha tomoniga turli xil margin o'rnatish:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Marginning barcha xususiyatlarini bitta xususiyat ichida bir qatorda yozish mumkin.

margin xususiyati marginning quyidagi xususiyatlarini qisqartirib bera oladi:

Ular mana bunday ishlaydi:

Agarda margin xususiyatida 4 ta qiymat bo'lsa:

margin: 25px 50px 75px 100px;
- tepa qism margini 25px
- o'ng tomon margini 50px
- pastki qism margini 75px
- chap tomon margini 100px

margin qisqartmasini 4 ta qiymat bilan ishlatish:

p {
  margin: 25px 50px 75px 100px;
}

Agar margin xususiyatida 3 ta qiymat bo'lsa:

margin: 25px 50px 75px;
- tepa qism margini 25px
- o'ng va chap tomon margini 50px
- pastki qism margini 75px

margin qisqartmasini 3 ta qiymat bilan ishlatish:

p {
  margin: 25px 50px 75px;
}

Agar margin xususiyatida 2 ta qiymat bo'lsa:

margin: 25px 50px;
- tepa va pastki qism margini 25px
- o'ng va chap tomon margini 50px

margin qisqartmasini 2 ta qiymat bilan ishlatish:

p {
  margin: 25px 50px;
}

Agar margin xususiyatida bitta qiymat bo'lsa:

margin qisqartmasini 1 ta qiymat bilan ishlatish:

p {
  margin: 25px;
}

Elementni konteyner ichida gorizontal tarzda o'rtaga olib kelish uchun margin xususiyatini avtomati auto qilishingiz mumkin.

Keyin element belgilangan kenglikni egallaydi va qolgan bo'sh joy chap va o'ng narginlar orasida teng ravishda bo'linadi.

margin: auto; dan foydalanish:

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

Bu misoldagi <p class="ex1"> elementi ota element hisoblangan <div> elementidan chap tomon marginining qiymatini meros qilib oladi:

inherit qiymatidan foydalanish:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Xususiyat

Ta'rif

Marginning barcha xususiyatlarini bir qatorda yozishga imkon beradi

Elementning pastki qismiga margin beradi

Elementning chap tomoniga margin beradi

Elementning o'ng tomoniga margin beradi

Elementning tepa qismiga margin beradi

Last updated 1 year ago