ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

CSS Box Model কী?

July 19, 2025

 


✅ CSS Box Model কী?

👉 প্রতিটি HTML এলিমেন্ট (যেমন div, p, h1) বাস্তবে একেকটা বক্স।

এই বক্স ৪টি স্তরে গঠিত:


| ← Margin       |
|  | ← Border    |
|  |  | ← Padding |
|  |  |  | Content |

📦 Box Model এর ৪টি অংশ:

নামকাজ
Contentমূল লেখা/ছবি থাকে
PaddingContent-এর চারপাশে ফাঁকা জায়গা (ভেতরের দিক)
BorderPadding-এর চারপাশে সীমানা
MarginBorder-এর বাইরের ফাঁকা জায়গা (অন্য এলিমেন্ট থেকে দূরত্ব)

✅ উদাহরণসহ বক্স


<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: lightblue;
      color: black;
      padding: 20px;
      border: 3px solid darkblue;
      margin: 30px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="box">
    আমি একটি CSS বক্স, যেখানে padding, border ও margin আছে!
  </div>
</body>
</html>

🎯 এখানে কী ঘটছে:

  • padding: 20px; → লেখার চারপাশে ভেতরের ফাঁকা জায়গা

  • border: 3px solid darkblue; → চারপাশে ৩px মোটা নীল সীমানা

  • margin: 30px; → বাইরের দিক থেকে অন্য এলিমেন্টের সাথে ৩০px দূরত্ব

✅ প্রতিটি আলাদা করে সেট করা:


padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

👉 একে সংক্ষেপে লেখা যায়:


padding: 10px 15px; /* top-bottom | left-right */

🧠 Extra Tip: Developer Tools দিয়ে Live দেখতে পারো

তোমার ব্রাউজারে (Chrome বা Firefox):

  • Right-click → Inspect → বক্সে margin, border, padding রঙে দেখা যাবে

আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments