ব্লক এবং ইনলাইন এলিমেন্টের মধ্যে পার্থক্য কী?

Question

Accepted Answer

প্রতিটি এলিমেন্টের একটি ডিফল্ট **display** আচরণ রয়েছে যা এটি লেআউটে কীভাবে প্রবাহিত হয় তা নিয়ন্ত্রণ করে। - **Block** এলিমেন্টগুলি একটি **নতুন লাইনে** শুরু হয় এবং **সম্পূর্ণ উপলব্ধ প্রস্থ** নেয়। এরা width/height এবং সমস্ত margins/paddings গ্রহণ করে। উদাহরণ: `

`, `

`, `
`, `
`। - Inline এলিমেন্টগুলি একটি লাইনের মধ্যে প্রবাহিত হয়, শুধুমাত্র তাদের কন্টেন্টের মতো প্রশস্ত হয়, এবং width/height এবং top/bottom margins উপেক্ষা করে। উদাহরণ: ``, ``, ``, ``। ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## একটি ব্যবহারিক সমস্যা ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` একটি inline এলিমেন্টে `width`/`height` সেট করা কোনো কাজ করে না। সমাধান হল এর display পরিবর্তন করা: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — উভয়ের সেরা `inline-block` টেক্সট ফ্লোতে বসে (পাশাপাশি) এবং* width/height/margins সম্মান করে — nav items, badges, বা বোতাম একটি সারিতে সাজানোর জন্য নিখুঁত। ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## কেন এটি গুরুত্বপূর্ণ ডিফল্ট display বোঝা ব্যাখ্যা করে কেন আপনার `` একটি height নেবে না, কেন `
`গুলি স্ট্যাক করে, এবং কখন `inline-block`, `flex`, বা `grid`-এ স্যুইচ করতে হবে। এটি কীভাবে এলিমেন্টগুলি কোনো লেআউট সিস্টেম প্রয়োগ করার আগে সাজানো হয় তার ভিত্তি।