CSS box-sizing

CSS Box Sizing

CSS box-sizing xossasi element kengligi va balandligini qanday hisoblashni belgilaydi: hisoblashga padding va chegaralar kiritilishi kerakmi yoki yo‘qmi.

Standart holatda element kengligi va balandligi quyidagicha hisoblanadi:

width + padding + border = elementning haqiqiy kengligi
height + padding + border = elementning haqiqiy balandligi

Bu shuni anglatadi: elementning kengligi/balandligini belgilaganingizda, element ko‘pincha siz belgilagandan kattaroq ko‘rinadi (chunki elementning border va paddingi uning belgilangan kengligi/balandligiga qo‘shiladi).

Quyida kengligi va balandligi bir xil belgilangan ikkita <div> elementi ko‘rsatilgan. Natijada ikkala <div> elementining o‘lchami har xil bo‘lib chiqadi (chunki div2 elementiga katta padding belgilangan):

Bu div’da width: 300px va height: 100px berilgan.

Bu div’da ham width: 300px va height: 100px berilgan.

Misol

.div1 {
  width: 300px;
  height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

O'zingiz sinab ko'ring »

box-sizing xossasi bu muammoni hal qiladi.

CSS box-sizing yechimi

box-sizing xossasi padding va borderni elementning umumiy kengligi va balandligiga kiritish imkonini beradi.

Agar elementga box-sizing: border-box; belgilasangiz, padding va border kenglik va balandlik hisobiga kiritiladi:

Endi ikkala div bir xil o‘lchamda!

Hooray!

Mana yuqoridagi misolning o‘zi, faqat ikkala <div> elementiga box-sizing: border-box; qo‘shilgan:

Misol

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
height: 100px;
padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

O'zingiz sinab ko'ring »

box-sizing: border-box; ishlatish natijasi ancha yaxshi bo‘lgani uchun ko‘plab dasturchilar o‘z sahifalaridagi barcha elementlar shu tarzda ishlashini xohlaydi.

Quyidagi kod barcha elementlarning o‘lchami shu tushunarliroq usulda belgilanishini ta’minlaydi. Ko‘plab brauzerlar ko‘pgina forma elementlarida allaqachon box-sizing: border-box; ishlatadi (lekin hammasida emas — shu sababli width: 100%; bo‘lganda input va matn maydonlari turlicha ko‘rinadi).

Buni barcha elementlarga qo‘llash xavfsiz va oqilona:

Misol

* {
box-sizing: border-box;
}

O'zingiz sinab ko'ring »

CSS box-sizing xossasi

Xossa	Description
box-sizing	Element kengligi va balandligi qanday hisoblanishini belgilaydi: ularga padding va chegaralar kiritiladimi yoki yo‘qmi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish