JavaScript සඳහා CSS හි අංග පුළුල් කිරීම

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 ගුණාංගයේ අගය කියවීමෙන් පසුව, අංගය නිශ්චිතවම එම පළල ඇති බවට අපට විශ්වාසයක් ඇති කර ගත නොහැකිය.