CSS এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা শিখেছি Color, Background ও Font/Text styling। আজকে শিখবো CSS-এর সবচেয়ে গুরুত্বপূর্ণ কনসেপ্টগুলোর একটা — Box Model। এটা না বুঝলে layout নিয়ে কাজ করা প্রায় অসম্ভব, তাই এই পর্বটা মনোযোগ দিয়ে পড়া দরকার।

Box Model কী?

CSS-এ প্রতিটা HTML এলিমেন্টকে একটা আয়তাকার বাক্স (box) হিসেবে ধরা হয় — তা সেটা একটা প্যারাগ্রাফ হোক, একটা বাটন হোক, বা একটা div। এই বাক্সের চারটা স্তর থাকে, ভেতর থেকে বাইরের দিকে:

margin

border

padding

content

স্তর	কাজ
Content	আসল কন্টেন্ট — টেক্সট, ছবি ইত্যাদি
Padding	কন্টেন্ট ও বর্ডারের মাঝের ফাঁকা জায়গা
Border	বাক্সের চারপাশের রেখা
Margin	বর্ডারের বাইরে অন্য এলিমেন্ট থেকে দূরত্ব

টিপস: Padding আর Margin গুলিয়ে ফেলা খুব কমন একটা ভুল। মনে রাখার সহজ উপায় — padding হলো বাক্সের ভেতরের কুশন (এলিমেন্টের নিজের গায়ের সাথে), আর margin হলো বাক্সের বাইরের দূরত্ব (অন্য এলিমেন্টের সাথে)।

Padding ব্যবহার করা

div {
  padding: 20px;              /* চারদিকে সমান */
  padding: 10px 20px;         /* উপর-নিচ ১০, ডান-বাম ২০ */
  padding: 10px 20px 15px 5px;/* উপর ডান নিচ বাম (ঘড়ির কাঁটার দিকে) */

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Border ব্যবহার করা

div {
  border: 2px solid black;
  border-radius: 8px;    /* কোণ গোলাকার করে */
}

border-এ তিনটা জিনিস একসাথে লেখা হয় — width, style (solid, dashed, dotted), আর রঙ। border-radius দিয়ে বাক্সের কোণ গোলাকার করা যায় — উচ্চ মান দিলে (যেমন ৫০%) পুরো বৃত্ত বানানো যায়।

border-radius: 0

border-radius: 8px

border-radius: 50px

Margin ব্যবহার করা

Margin-এর সিনট্যাক্স একদম padding-এর মতোই:

div {
  margin: 20px;
  margin: 10px 20px;
  margin: 0 auto;   /* উপর-নিচ ০, ডান-বাম auto — এলিমেন্ট মাঝখানে আসবে */
}

টিপস: margin: 0 auto; একটা খুব জনপ্রিয় ট্রিক — এটা দিয়ে একটা block এলিমেন্টকে (যার নির্দিষ্ট width আছে) পেজের মাঝখানে বসানো যায়। এই ব্লগ পোস্টের এই পুরো লেখাটাও এভাবেই মাঝখানে বসানো আছে।

Width ও Height

div {
  width: 300px;
  height: 200px;

  max-width: 100%;   /* কখনো এর বেশি চওড়া হবে না */
  min-height: 100px; /* কখনো এর কম উচ্চতা হবে না */
}

পিক্সেল (px) ছাড়াও শতাংশ (%) ব্যবহার করা যায় — এটা প্যারেন্ট এলিমেন্টের সাইজের সাপেক্ষে হিসাব হয়। max-width: 100% ছবিকে responsive বানানোর একটা কমন টেকনিক।

একটা কমন সমস্যা — Box সাইজ কেন বড় হয়ে যায়

ডিফল্টভাবে, তুমি যদি একটা div-এ width: 300px দাও, আর তারপর padding: 20px আর border: 2px যোগ করো, তাহলে বাক্সের আসল width হয়ে যাবে ৩০০ + ২০+২০ + ২+২ = ৩৪৪px। কারণ ডিফল্টভাবে padding আর border, width-এর হিসাবের বাইরে যোগ হয়।

এটা এড়ানোর জন্য box-sizing: border-box ব্যবহার করা হয়:

* {
  box-sizing: border-box;
}

এটা দিলে padding আর border, width-এর ভেতরেই হিসাব হবে — মানে width: 300px দিলে পুরো বাক্স ৩০০px-ই থাকবে, ভেতরের content-এর জায়গা কমে যাবে, কিন্তু বাইরের সাইজ বদলাবে না।

টিপস: প্রায় প্রতিটা প্রফেশনাল CSS ফাইলের একদম শুরুতে * { box-sizing: border-box; } লেখা থাকে — এটা লেআউট নিয়ে অনেক মাথাব্যথা কমিয়ে দেয়, তাই তুমিও শুরু থেকেই এই অভ্যাস গড়ে তোলো।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Box Model উদাহরণ</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .card {
      width: 300px;
      padding: 20px;
      margin: 20px auto;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>প্রোডাক্ট কার্ড</h2>
    <p>এই কার্ডটার width ঠিক ৩০০px-ই থাকবে, box-sizing: border-box থাকার কারণে।</p>
  </div>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

একটা div বানাও, তাতে width, padding, border, ও margin সবগুলো আলাদা মান দাও
box-sizing: border-box ছাড়া ও সহ — দুইভাবেই দেখে পার্থক্যটা বোঝার চেষ্টা করো
margin: 0 auto দিয়ে একটা div পেজের মাঝখানে বসাও

পরের পর্বে যা থাকছে

পর্ব ৪-এ আমরা শিখবো Display property — block, inline, inline-block, ও none এর পার্থক্য, উদাহরণসহ।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ৩)