display: inline-block মান এলিমেন্টকে ইনলাইন-লেভেল ব্লক কন্টেইনার হিসেবে প্রদর্শন করে। এটি ইনলাইন এলিমেন্টের মতো একই লাইনে থাকে, কিন্তু ব্লক এলিমেন্টের মতো width, height, margin, padding গ্রহণ করে।
উদাহরণ ১: প্যারাগ্রাফকে inline-block করা
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo { display: inline-block; } </style> </head> <body> <h1>Student Result</h1> <div> The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>. Check the website on the same day at 8PM. </div> </body> </html>
আউটপুট
উদাহরণ ২: display: none vs inline-block
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: none; } p.demo2 { display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">9AM</p> 10AM on 20th December. </div> <div> Match will end at <p class="demo2">5PM</p> on 20th December. </div> </body> </html>
আউটপুট
inline-block এর প্রধান ব্যবহার
- নেভিবার আইটেম তৈরি করা
- বাটন গ্রুপ তৈরি করা
- ইনলাইন এলিমেন্টে width/height দেওয়া
- ভרטিক্যাল অ্যালাইনমেন্ট নিয়ন্ত্রণ
নোট: ইনলাইন-ব্লক এলিমেন্টের মাঝে হোয়াইটস্পেস (whitespace) রেন্ডার হয়, যা অনুচিহ্নিত গ্যাপ সৃষ্টি করতে পারে। এটি ঠিক করার জন্য ফন্ট-সাইজ ০ বা কমেন্ট ব্যবহার করা হয়।
