Kenglik va Max-Kenglik

CSS Tashkiliy - Kenglik va Max-Kenglik

Kenglik, Max-Kenglik va Margin: Auto;

Oldingi bobda aytilganidek, blok darajadagi element har doim mavjud bo'lgan to'liq kenglikni egallaydi (chapga va o'ngga imkon qadar cho'ziladi).

Blok darajadagi elementning kengligini o'rnatish, uning konteynerning chetlariga cho'zilishidan to'sadi. Keyin, elementni konteyner ichida gorizontal markazga joylashtirish uchun marginlarni auto ga o'rnatishingiz mumkin. Element belgilangan kenglikni egallaydi va qolgan bo'sh joy ikki margin o'rtasida teng taqsimlanadi:

Bu <div> elementining kengligi 500px va margin auto ga o'rnatilgan.

Eslatma: Yuqoridagi <div> bilan bog'liq muammo, brauzer oynasi element kengligidan kichik bo'lganda sodir bo'ladi. Brauzer sahifaga gorizontal scroll bar qo'shadi.

Bunday holatda, max-width o'rnatish brauzerning kichik oynalar bilan ishlashini yaxshilaydi. Bu kichik qurilmalarda saytni foydalanishga qulay qilishda muhimdir:

Bu <div> elementining max-kengligi 500px va margin auto ga o'rnatilgan.

Maslahat: Brauzer oynasini 500px dan kam kenglikka o'zgartiring, ikkita <div> o'rtasidagi farqni ko'ring!

Quyida yuqoridagi ikki <div> ning misoli:

Misol

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73ad21;
}
 
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73ad21;
}