CSSBeginner
CSS Box Model
Content, padding, border ও margin — CSS box model-এর প্রতিটি স্তর বাংলায় বুঝুন।
8টি অংশবাংলা ভাষায়
HTML-এর প্রতিটি element একটি বাক্স (box)। CSS-এ সেই বাক্সের মাপ-সংক্রান্ত সব নিয়মকে বলা হয় Box Model। চারটি অংশ মিলিয়ে গঠিত:
- Content — text বা ছবি
- Padding — content ও border-এর মাঝের ফাঁকা জায়গা
- Border — চারপাশের কাঠামো
- Margin — border-এর বাইরের দূরত্ব
উদাহরণ
.box {
width: 300px;
padding: 20px; /* content ও border-এর ঘর */
border: 2px solid #333;
margin: 10px; /* দুই box-এর মাঝের ঘর */
}box-sizing
box-sizing: border-box দিলে width-এর ভেতরেই padding ও border ধরা হয় — মাপ হিসাব করা সহজ হয়। আধুনিক প্রজেক্টে এটি universal ভাবে দেওয়া হয়।
*,
*::before,
*::after {
box-sizing: border-box;
}মনে রাখার নিয়ম
margin বাইরের, padding ভেতরের জায়গা। দুইটি element-এর margin গুলে এক হয়ে যায় (margin collapse), কিন্তু padding কখনও নয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।