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...