CSS-ի տարրերի ընդլայնում JavaScript-ի համար

CSS հատկությունների՝ width և height նշանակումը երաշխավորում չէ, որ տարրը կստանա նշված չափսը: Եկեք նայենք օրինակներով:

Օրինակ

Այժմ տարրի չափսերը համընկնում են նշվածների հետ:

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

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

Результат:

Օրինակ

Այժմ եկեք տարրին նշանակենք padding հատկությունը: Արդյունքում տարրի իրական լայնությունը կդառնա ավելի մեծ և կընդլայնվի ներքին բացի նշված արժեքով:

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

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

Результат:

Օրինակ

Սահմանի առկայությունը նույնպես ընդլայնում է տարրը.

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

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

Результат:

Օրինակ

box-sizing հատկությունը թույլ է տալիս փոխել վերը նկարագրված վարքագիծը: Կարելի է անել այնպես, որ ոչ ներքին բացը, ոչ էլ սահմանը ընդլայնեն տարրը: Դրա համար այս հատկությանը պետք է նշանակել border-box արժեքը.

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;
}

Результат:

Նկարագրվածի կարևորությունը

JavaScript-ի տեսանկյունից նկարագրված իրավիճակը շատ հարմար չէ: Չէ՞ որ ստացվում է, որ կարդալով width հատկության արժեքը՝ մենք բոլորովին չենք կարող վստահ լինել, որ տարրը կունենա հենց այդ լայնությունը: