HTML এবং CSS শিখার শুরুতে বক্স মডেলে margin এবং padding-এর পার্থক্য বোঝা কিছুটা কঠিন হতে পারে। এই আর্টিকেলে আমি শেয়ার করব কিভাবে আমি এই দুটির পার্থক্য স্পষ্টভাবে বুঝতে পারলাম।
CSS বক্স মডেল: একটি চিত্রের比方
বক্স মডেলকে একটি চিত্রের ফ্রেমের সাথে তুলনা করা যাক:
- Content (বিষয়বস্তু): চিত্রটিই - যা কন্টেইনারে রাখা হয়।
- Padding: চিত্র এবং ফ্রেমের মধ্যবর্তী ম্যাটিং (matting) - CSS-এ প্যাডিং কন্টেন্ট বক্সকে বের দিকে ধাক্কা দিয়ে কন্টেইনারের আকার বড় করে।
- Border: ফ্রেমটি - যা কন্টেন্ট এবং প্যাডিং ধারণ করে।
- Margin: দুটি সন্নিহিত এলিমেন্টের (ফ্রেমের) মধ্যবর্তী স্থান - ভিউপোর্টে (দিওয়ালে) ফ্রেমগুলোর মাঝপথের খালি জায়গা।
কখন Margin এবং কখন Padding ব্যবহার করবেন?
Margin: যখন একটি এলিমেন্টের অন্যান্য এলিমেন্টের সাথে সম্পর্কে অবস্থান সমন্বয় করতে চান।
Padding: যখন কন্টেন্টের চারপাশের স্থান বড় করতে চান।
Margin এবং Padding সেট করার পদ্ধতি
প্রতিটি সাইড আলাদা করা
#star-wars {
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
শর্টহ্যান্ড সিনট্যাক্স (TRBL: Top, Right, Bottom, Left)
/* চারটি মান: top right bottom left */ margin: 10px 25px 30px 5px; /* দুইটি মান: top/bottom left/right */ margin: 20px 30px; /* একই মান সব সাইডে */ margin: 30px;
উপসংহার
Margin বর্ডারের বাইরের স্পেস নিয়ে কাজ করে, padding বর্ডারের ভিতরের স্পেস নিয়ে। কোড এডিটরে margin এবং padding-র বিভিন্ন মান দিয়ে পরীক্ষা করে দেখুন - আপনি দ্রুত এটি মাস্টার করতে পারবেন।
