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 বৈশিষ্ট্যের মান পড়ে আমরা মোটেও নিশ্চিত হতে পারি না যে এলিমেন্টটি ঠিক সেই প্রস্থের হবে।