CSS elementlarni JavaScript uchun kengaytirish
CSS xususiyatlarini
width va
height
belgilash elementning berilgan o'lchamga ega bo'lishini kafolatlamaydi.
Keling, misollar orqali ko'rib chiqaylik.
Misol
Hozirda element o'lchamlari belgilanganlarga mos keladi:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Misol
Endi esa elementga
padding
xususiyatini belgilaymiz.
Natijada elementning haqiqiy kengayi kattalashadi
va ichki chetlashtirishning berilgan qiymatiga qarab kengayadi:
<div id="elem">
text
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Misol
Chegara mavjudligi ham elementni kengaytiradi:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Misol
box-sizing
xususiyati yuqorida tavsiflangan xatti-harakarni o'zgartirishga imkon beradi.
Ichki chetlashtirish ham, chegara ham elementni kengaytirmasligi mumkin.
Buning uchun bu xususiyatga
border-box qiymatini belgilash kerak:
<div id="elem">
text
</div>
#elem {
box-sizing: border-box;
padding: 20px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Tavsiflangan narsaning ahamiyati
JavaScript nuqtai nazaridan tavsiflangan holat
juda qulay emas. Axir, ma'lum bo'ladiki,
width xususiyatining qiymatini o'qib,
biz elementning aynan shu kengaylikka ega bo'lishiga ishonch hosil qila olmaymiz.