JavaScript үчүн CSS элементтерин кеңейтүү

CSS касиеттерин белгилөө width жана height элементтин белгиленген өлчөмдө болорун кепилдей бербейт. Келгиле, мисалдар менен карап чыгалы.

Мисал

Азыркы учурда элементтин өлчөмдөрү белгиленгендер менен дал келет:

html<div id="elem">
  текст
</div>

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

Результат:

Мисал

Эми элементке padding касиетин белгилейли. Натыйжада элементтин чыныгы туурасы көбөйөт жана ички жылдырымдын белгиленген маанисине кеңейет:

html<div id="elem">
  текст
</div>

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

Результат:

Мисал

Чектеринин болушу да элементти кеңейтет:

html<div id="elem">
  текст
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Мисал

box-sizing касиети жогоруда сүрөттөлгөн жүрүм-турумду өзгөртүүгө мүмкүнчүлүк берет. Ички жылдырым да, чектер да элементти кеңейтпеши үчүн кылууга болот. Бул үчүн ага border-box маанисин берүү керек:

html<div id="elem">
  текст
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Сүрөттөлгөндүн маанилүүлүгү

JavaScript көз карашынан бул жагдай өтө ыңгайлуу эмес. Анткени width касиетинин маанисин окуп алгандан кийин элементтин туурасы так ушул деп ишене албайбыз.