Box Model

Box model

CSS da har bir element to'rtburchak quti — hatto matn va rasmlar ham qutilar ichida joylashadi. Box model o'sha qutini tashkil qiluvchi qatlamlarni tavsiflaydi. Ushbu qatlamlarni tasavvur qila olsangiz, oraliq va o'lchamlash taxmin qilishday tuyulmay qoladi.

To'rtta qatlam

Ichidan tashqariga qarab, har bir qutida:

• Content — haqiqiy matn, rasm yoki bola elementlar. Uning o'lchami width va height dan keladi.
• Padding — quti ichidagi, kontent va chegara orasidagi bo'sh joy. Padding kontentni ichkariga suradi va elementning fon rangini bo'lishadi.
• Border — padding va kontentni o'rab turadigan chiziq. Uning kengligi, uslubi va rangi bor.
• Margin — quti tashqarisidagi, qo'shni elementlarni itaruvchi bo'sh joy. Marginlar har doim shaffof.

Tartibni eslashning qulay usuli: content — rasm, padding — ram (mat), border — ramka (frame), margin esa devordagi bir ramkalangan rasm bilan keyingisi orasidagi oraliq.

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid gray;
  margin: 16px;
}

Klassik o'lcham kutilmagan holati

Standart bo'yicha width faqat content kengligini belgilaydi. Padding va border keyin ustiga qo'shiladi. Shunday qilib, yuqoridagi .card ekranda 200px keng emas — u:

200 (content) + 20 + 20 (padding) + 2 + 2 (border) = 244px

Bu deyarli har bir boshlovchini adashtiradi. Siz width: 200px belgilaysiz, lekin quti kutilganidan kengroq chiqadi va qutilarni qatorda tekislash chigallashadi.

box-sizing: border-box yordamga keladi

box-sizing: border-box ni belgilash qoidani o'zgartiradi: endi width padding va borderni o'z ichiga oladi. width: 200px ga belgilangan quti ekranda aynan 200px keng bo'lib qoladi, padding va border esa o'sha joyga qo'shilish o'rniga ichiga kirib boradi.

Bu joylashuvlarni ancha oldindan aytib bo'ladigan qiladi, shuning uchun ko'pchilik dasturchilar buni stylesheetlari yuqorisida hamma narsaga qo'llaydi:

* {
  box-sizing: border-box;
}
 
.card {
  width: 200px;   /* stays 200px total, padding and border included */
  padding: 20px;
  border: 2px solid gray;
}

Content maydoni joy ochish uchun shunchaki kichrayadi. Siz aslida xohlagan yakuniy o'lcham nuqtai nazaridan fikrlashingiz mumkin bo'ladi, bu esa deyarli har doim nazarda tutgan narsangiz.

Suhbat maslahatlari

• To'rtta qatlamni tartibda nomlang — content, padding, border, margin — va margin tashqarida, padding esa ichkarida ekanligini biling.
• Standart bo'yicha padding va border kenglikka qo'shilishini va box-sizing: border-box width ni uning o'rniga umumiy o'lcham qilishini tushuntiring.
• border-box ni global qo'llash oldindan aytib bo'ladigan joylashuvlar uchun keng tarqalgan, oqilona standart ekanligini eslatib o'ting.