CSS display প্রপার্টি একটি এলিমেন্ট কীভাবে ওয়েব পেজে প্রদর্শিত হবে তা নির্ধারণ করে। প্রধান মানগুলো নিচে দেওয়া হলো:
| Sr.no | Property Value | বর্ণনা |
|---|---|---|
| 1 | inline | এলিমেন্টকে ইনলাইন এলিমেন্ট হিসেবে প্রদর্শন করে |
| 2 | block | এলিমেন্টকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করে |
| 3 | contents | কন্টেইনারটি অদৃশ্য করে, চাইল্ড এলিমেন্টগুলো প্যারেন্টের চাইল্ড হয়ে যায় |
| 4 | flex | এলিমেন্টকে ব্লক-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে |
| 5 | grid | এলিমেন্টকে ব্লক-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে |
| 6 | inline-block | এলিমেন্টকে ইনলাইন-লেভেল ব্লক কন্টেইনার হিসেবে প্রদর্শন করে |
| 7 | inline-flex | এলিমেন্টকে ইনলাইন-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে |
| 8 | inline-grid | এলিমেন্টকে ইনলাইন-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে |
| 9 | inline-table | এলিমেন্টকে ইনলাইন-লেভেল টেবিল হিসেবে প্রদর্শন করে |
উদাহরণ ১: display: none vs inline
<!DOCTYPE html> <html> <head> <style> span { background-color: orange; color: white; } p.demo { display: none; } span.demo1 { display: inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div> <div> Match will end at <span class="demo1">5PM</span> on 20th December. </div> </body> </html>
আউটপুট
উদাহরণ ২: block vs inline-block
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: block; } p.demo2 { display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019. </div> <div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div> </body> </html>
আউটপুট
গুরুত্বপূর্ণ মানের সংক্ষিপ্ত বিবরণ
- none: এলিমেন্ট সম্পূর্ণ অদৃশ্য, স্পেসও থাকে না
- block: নতুন লাইন থেকে শুরু, পুরো প্রস্থ নেয়
- inline: একই লাইনে থাকে, width/height গ্রহণ করে না
- flex/grid: আধুনিক লেআউট মডেল
