CSS Margins

CSS Margins

Marginlar elementlar atrofida, har qanday belgilangan chegara tashqarisida bo'sh joy yaratish uchun ishlatiladi.

CSS Marginlar

CSS margin xususiyatlari elementlar atrofida, har qanday belgilangan chegara tashqarisida bo'sh joy yaratish uchun ishlatiladi.

CSS bilan, siz marginlarni to'liq nazorat qilishingiz mumkin. Elementning har bir tomoni uchun marginni o'rnatish uchun xususiyatlar mavjud (yuqori, o'ng, pastki va chap).

Margin - Alohida Tomonlar

CSS elementning har bir tomoni uchun marginni belgilash uchun xususiyatlarga ega:

• margin-top
• margin-right
• margin-bottom
• margin-left

Barcha margin xususiyatlari quyidagi qiymatlarga ega bo'lishi mumkin:

• auto - brauzer marginni hisoblaydi
• length - marginni px, pt, sm va boshqa birliklarda belgilaydi
• % - marginni ota element kengligining foizida belgilaydi
• inherit - margin ota elementdan meros qilib olinishi kerakligini belgilaydi

Maslahat: Manfiy qiymatlar qabul qilinadi.

Misol

<p> elementi uchun barcha to'rt tomon uchun har xil marginlar o'rnatish:

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

Margin - Qisqartma Xususiyat

Kodning qisqa bo'lishi uchun barcha margin xususiyatlarini bitta xususiyatda belgilash mumkin.

margin xususiyati quyidagi alohida margin xususiyatlari uchun qisqartma xususiyat hisoblanadi:

• margin-top
• margin-right
• margin-bottom
• margin-left

Bu qanday ishlaydi:

Agar margin xususiyati to'rt qiymatga ega bo'lsa:

margin: 25px 50px 75px 100px;

• Yuqori margin 25px
• O'ng margin 50px
• Pastki margin 75px
• Chap margin 100px

Misol

To'rt qiymatga ega qisqartma margin xususiyatidan foydalaning:

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

Agar margin xususiyati uch qiymatga ega bo'lsa:

margin: 25px 50px 75px;

• Yuqori margin 25px
• O'ng va chap marginlar 50px
• Pastki margin 75px

Misol

Uch qiymatli qisqartma margin xususiyatidan foydalaning:

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

Agar margin xususiyati ikki qiymatga ega bo'lsa:

margin: 25px 50px;

• Yuqori va pastki marginlar 25px
• O'ng va chap marginlar 50px

Misol

Ikki qiymatli qisqartma margin xususiyatidan foydalaning:

p {
  margin: 25px 50px;
}

Agar margin xususiyati bitta qiymatga ega bo'lsa:

margin: 25px;

• Barcha to'rt margin 25px

Misol

Bitta qiymatli qisqartma margin xususiyatidan foydalaning:

p {
  margin: 25px;
}

auto Qiymati

margin xususiyatini auto ga o'rnatib, elementni konteyneri ichida gorizontal ravishda markazga qo'yishingiz mumkin.

Element belgilangan kenglikni oladi, qolgan joy esa chap va o'ng marginlar o'rtasida teng bo'linadi.

Misol

margin: auto; dan foydalaning:

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

inherit Qiymati

Ushbu misol <p class="ex1"> elementi chap marginini ota elementi (<div>) dan meros qilib olishiga imkon beradi:

Misol

inherit qiymatidan foydalaning:

div {
  border: 1px solid red;
  margin-left: 100px;
}
 
p.ex1 {
  margin-left: inherit;
}

Barcha CSS Margin Xususiyatlari