Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS margin

ULASHISH

CSS marginlari

CSS margin xossalari elementlar atrofida, belgilangan chegaralardan tashqarida bo‘shliq yaratish uchun ishlatiladi.

Marginlar element chegarasi va atrofidagi elementlar orasidagi masofani belgilaydi.

CSS bilan marginlar ustidan to‘liq nazoratingiz bor. CSS’da elementning har bir tomoni (yuqori, o‘ng, pastki va chap) uchun margin belgilash xossalari va barcha margin xossalarini bitta deklaratsiyada belgilash qisqartma xossasi bor.

Bu elementning margin qiymati 70px.
O‘zingiz sinab ko‘ring »

Margin — alohida tomonlar

CSS elementning har bir tomoni uchun margin belgilash xossalariga ega:

Barcha margin xossalari quyidagi qiymatlarga ega bo‘lishi mumkin:

  • auto — brauzer marginni hisoblaydi
  • length — marginni px, pt, cm va h.k. belgilaydi
  • % — o‘z ichiga oluvchi element kengligining foizida margin belgilaydi
  • inherit — margin ota elementdan meros qilib olinishi kerakligini belgilaydi

Maslahat: Manfiy qiymatlarga ham ruxsat beriladi.

Misol

<p> elementining to‘rt tomoni uchun turli margin qiymatlarini belgilash:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
O‘zingiz sinab ko‘ring »

Margin — qisqartma xossasi

Kodni qisqartirish uchun barcha margin xossalarini bitta deklaratsiyada belgilash mumkin.

margin xossasi quyidagi alohida margin xossalari uchun qisqartma xossadir:

Bu qanday ishlaydi:

Agar margin xossasi to‘rtta qiymatga ega bo‘lsa:

  • margin: 25px 50px 75px 100px;
    • yuqori margin — 25px
    • o‘ng margin — 50px
    • pastki margin — 75px
    • chap margin — 100px

Misol

margin qisqartma xossasidan to‘rtta qiymat bilan foydalanish:

p {
  margin: 25px 50px 75px 100px;
}
O‘zingiz sinab ko‘ring »

Agar margin xossasi uchta qiymatga ega bo‘lsa:

  • margin: 25px 50px 75px;
    • yuqori margin — 25px
    • o‘ng va chap marginlar 50px
    • pastki margin — 75px

Misol

margin qisqartma xossasidan uchta qiymat bilan foydalanish:

p {
  margin: 25px 50px 75px;
}
O‘zingiz sinab ko‘ring »

Agar margin xossasi ikkita qiymatga ega bo‘lsa:

  • margin: 25px 50px;
    • yuqori va pastki marginlar 25px
    • o‘ng va chap marginlar 50px

Misol

margin qisqartma xossasidan ikkita qiymat bilan foydalanish:

p {
  margin: 25px 50px;
}
O‘zingiz sinab ko‘ring »

Agar margin xossasi bitta qiymatga ega bo‘lsa:

  • margin: 25px;
    • to‘rtala margin ham 25px

Misol

margin qisqartma xossasidan bitta qiymat bilan foydalanish:

p {
  margin: 25px;
}
O‘zingiz sinab ko‘ring »

auto qiymati

Elementni konteyneri ichida gorizontal markazlashtirish uchun margin xossasini auto qilib belgilash mumkin.

Bunda element belgilangan kenglikni egallaydi va qolgan bo‘shliq chap va o‘ng marginlar o‘rtasida teng bo‘linadi.

Misol

margin: auto qiymatidan foydalaning:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
O‘zingiz sinab ko‘ring »

inherit qiymati

margin xossasini inherit qilib belgilash orqali marginning ota elementdan meros qilib olinishini ta’minlash mumkin.

Bu misol <p class="ex1"> elementining chap marginini ota (<div>) elementdan meros qilib olishini ko‘rsatadi:

Misol

inherit qiymatidan foydalanish:

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

p.ex1 {
  margin-left: inherit;
}
O‘zingiz sinab ko‘ring »

Barcha CSS margin xossalari

Xususiyat Tavsif
margin Barcha margin xossalarini bitta deklaratsiyada belgilash uchun qisqartma xossa
margin-bottom Elementning pastki chetini o‘rnatadi
margin-left Elementning chap chetini o‘rnatadi
margin-right Elementning o‘ng chetini o‘rnatadi
margin-top Elementning yuqori chetini o‘rnatadi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish