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:

html<div id="elem">
  text
</div>

css#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:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Misol

Chegara mavjudligi ham elementni kengaytiradi:

html<div id="elem">
  text
</div>

css#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:

html<div id="elem">
  text
</div>

css#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.