Back

8. CSS Display & Visibility

📘 কনসেপ্ট (থিওরি)

display প্রপার্টি নিয়ন্ত্রণ করে একটি এলিমেন্ট কীভাবে রেন্ডার হবে। **প্রচলিত display মান:** - block — পুরো প্রস্থ নেয়, নতুন লাইনে শুরু (div, p, h1) - inline — যতটুকু দরকার ততটুকু, নতুন লাইন নয় (span, a, strong) - inline-block — ইনলাইন কিন্তু width/height দেওয়া যায় - none — সম্পূর্ণ লুকানো, কোনো জায়গা নেয় না - flex — ফ্লেক্সিবল বক্স লেআউট - grid — গ্রিড-ভিত্তিক লেআউট **visibility: hidden** বনাম **display: none**: - visibility: hidden — অদৃশ্য কিন্তু জায়গা দখল করে - display: none — লেআউট থেকে সম্পূর্ণ সরিয়ে দেয় **overflow** কন্টেন্ট বেশি হলে কী হবে তা নিয়ন্ত্রণ করে: - overflow: hidden — কন্টেন্ট কেটে ফেলে - overflow: scroll — স্ক্রলবার যোগ করে - overflow: auto — প্রয়োজনে স্ক্রলবার

💡 উদাহরণ

Display প্রপার্টি:
Block 1
Block 2
Inline 1 Inline 2

IB 1
IB 2

🎯 আপনার কাজ (প্র্যাকটিস)

পাশাপাশি ৩টি inline-block বক্স তৈরি করুন, প্রতিটির নির্দিষ্ট width ও height থাকবে।
main.css
Loading...
OUTPUT
Run your code to see the output here...