CSS-এ মার্জিন এবং প্যাডিং-এর পার্থক্য স্পষ্টভাবে বুঝুন।
মার্জিন বনাম প্যাডিং
সর্বসংক্ষিপ্ত সংজ্ঞা:
margin→ HTML এলিমেন্টের বর্ডারের বাইরে স্পেস যোগ করেpadding→ HTML এলিমেন্টের বর্ডারের ভিতরে স্পেস যোগ করে
যখন আপনি কোনো এলিমেন্টে মার্জিন বা প্যাডিং প্রয়োগ করেন, তবে তারা এলিমেন্টকে ভিন্নভাবে প্রভাবিত করে:
বাস্তব উদাহরণ
নিচে একটি সিম্পল <button> এলিমেন্ট দেখানো হয়েছে যা একটি <div> কন্টেইনারের ভিতরে আছে।
বাটনটির:
- ২৪পিক্সেল মার্জিন → বাটনকে প্যারেন্ট কন্টেইনারের বর্ডার থেকে দূরে ঠেলে দেয়
- ৪পিক্সেল বর্ডার
- ১৬পিক্সেল প্যাডিং → বাটনের বর্ডার এবং কন্টেন্ট (টেক্সট) এর মাঝপথে স্পেস তৈরি করে
- কন্টেন্ট (টেক্সট: "Button")
button {
padding: 16px;
margin: 24px;
border: 4px solid #282828;
}margin এবং padding দুটোই হোয়াইটস্পেস কন্ট্রোল করে, কিন্তু তাদের ফাংশন পরস্পর বিপরীত।
