CSS Marginlar

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

W3Schools online HTML editor

CSS Marginlar

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:

• margin-top

• margin-right

• margin-bottom

• margin-left

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

CSS

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

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

W3Schools online HTML editor

Margin - qisqarma xususiyat

Marginning barcha xususiyatlarini bitta xususiyat ichida bir qatorda yozish mumkin.

margin xususiyati marginning quyidagi xususiyatlarini qisqartirib bera oladi:

• margin-top

• margin-right

• margin-bottom

• margin-left

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

CSS

margin qisqartmasini 4 ta qiymat bilan ishlatish:

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

W3Schools online HTML editor

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

CSS

margin qisqartmasini 3 ta qiymat bilan ishlatish:

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

W3Schools online HTML editor

Agar margin xususiyatida 2 ta qiymat bo'lsa:

• margin: 25px 50px;

  • tepa va pastki qism margini 25px

  • o'ng va chap tomon margini 50px

CSS

margin qisqartmasini 2 ta qiymat bilan ishlatish:

p {
  margin: 25px 50px;
}

W3Schools online HTML editor

Agar margin xususiyatida bitta qiymat bo'lsa:

• margin: 25px;

  • barcha tomonlardagi margin 25px

CSS

margin qisqartmasini 1 ta qiymat bilan ishlatish:

p {
  margin: 25px;
}

W3Schools online HTML editor

Auto qiymati

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.

CSS

margin: auto; dan foydalanish:

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

W3Schools online HTML editor

Inherit qiymati

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

CSS

inherit qiymatidan foydalanish:

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

p.ex1 {
  margin-left: inherit;
}

W3Schools online HTML editor

Barcha CSS margin xususiyatlari

Xususiyat	Ta'rif
margin	Marginning barcha xususiyatlarini bir qatorda yozishga imkon beradi
margin-bottom	Elementning pastki qismiga margin beradi
margin-left	Elementning chap tomoniga margin beradi
margin-right	Elementning o'ng tomoniga margin beradi
margin-top	Elementning tepa qismiga margin beradi