4. CSS Box Model
📘 কনসেপ্ট (থিওরি)
প্রতিটি HTML এলিমেন্ট একটি আয়তাকার বক্স। CSS Box Model প্রতিটি এলিমেন্টের চারপাশের জায়গা বর্ণনা করে:
1. **Content** — ভেতরের আসল টেক্সট/ছবি
2. **Padding** — কন্টেন্ট ও বর্ডারের মধ্যের ফাঁকা জায়গা
3. **Border** — প্যাডিংয়ের চারপাশের প্রান্ত
4. **Margin** — বর্ডারের বাইরের ফাঁকা জায়গা
div {
width: 200px;
padding: 20px; /* ভেতরের ফাঁকা */
border: 2px solid blue;
margin: 10px; /* বাইরের ফাঁকা */
}
**box-sizing: border-box** width এর মধ্যে padding ও border অন্তর্ভুক্ত করে:
* { box-sizing: border-box; }
এটি প্রায় সবসময় সুপারিশকৃত।
💡 উদাহরণ
বক্স মডেল দেখা:
কন্টেন্ট এরিয়া
Width: 300px (padding + border সহ)
🎯 আপনার কাজ (প্র্যাকটিস)
300px width, 20px padding, 3px solid বর্ডার এবং 30px margin সহ একটি বক্স তৈরি করুন। পেজে সেন্টার করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...