CSS-এ প্যাডিং মার্জিন নিয়ে কাজ

ধরুন আমরা একটি নির্দিষ্ট উপাদানের প্রস্থ নির্ধারণ করেছি 100px। CSS-এ এটি মোটেই বোঝায় না যে উপাদানটির প্রকৃত প্রস্থ হবে 100px। বিষয়টি হলো যে padding যোগ করা উপাদানটিকে প্রসারিত করে এবং এটি width বৈশিষ্ট্যে যা উল্লেখ করা হয়েছে তার চেয়ে বড় হয়ে যায়।

আসুন একটি উদাহরণ দেখি। আসুন দুটি ব্লক তৈরি করি, যাদের প্রস্থ 100 পিক্সেল নির্ধারণ করব। একই সময়ে, দ্বিতীয় ব্লকটিকে padding নির্ধারণ করব, কিন্তু প্রথমটিকে করব না। ফলস্বরূপ, দ্বিতীয় ব্লকটি মার্জিনের আকার অনুযায়ী বড় হবে:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px; /* মার্জিন নির্ধারণ করুন */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: