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 қасиетінің мәнін оқып алғаннан кейін біз элементтің дәл сол енге ие болатынына сенімді бола алмаймыз.