Box model

Barcha HTML elementlari box sifatida ko'rilishi mumkin. CSS da "quti modeli" termini dizayn va joylashuv uchun ishlatiladi.

CSS bloklar modeli bu har bir HTML elementini orab turuvchi blok. U margin, border, padding va content qismlaridan tashkil topgan.

Model qismlarining tavsifi:

Content - blokning kontenti yani matn va rasmlar joylashadigan qismi.
Padding - Content atrofidagi sohani tozalovchi shaffof qism.
Border - Content va Padding atrofidagi hoshiya.
Margin - Border atrofidagi sohani tozalovchi shaffof qism.

Box modeli yordamida elementlar atrofiga chegara qo'shishimiz va elementlar orasidagi masofani belgilashimiz mumkin:

Namuna:
div { width: 300px; padding: 25px; border: 25px solid green; margin: 25px; }

Elementning kengligi va balandligi

Barcha brauzerlarda elementga kenglik va balandlik o'rnatishda, box model qanday ishlayotganini tekshirib olishingiz kerak.

tutorials.uz

Elementning umumiy kengligi quyidagicha hisoblanadi:

Elementning umumiy kengligi = eni+ chap padding + o'ng padding + chap border(chegara) + o'ng border(chegara) + chap margin + o'ng margin

Elementning umumiy balandligi quyidagicha hisoblanadi:

Elementning umumiy balandligi = balandlik + tepa padding + pastki padding + tepa border + pastki border + tepa margin + pastki margin

Hisoblash rasmda:

tutorials.uz