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

CSS Part 4

আগের পর্বে আমরা শিখেছি Box Model। আজকে শিখবো display property — এটা নিয়ন্ত্রণ করে একটা এলিমেন্ট কীভাবে পেজে বসবে। এটা layout শেখার প্রথম ধাপ, এবং পরবর্তী পর্বগুলোতে (Flexbox, Grid) আমরা এই কনসেপ্টের ওপর ভিত্তি করেই এগোবো।

display কী নিয়ন্ত্রণ করে

HTML পর্ব ৮-এ আমরা Block vs Inline element নিয়ে প্রাথমিক ধারণা পেয়েছিলাম। আসলে এই ব্যবহারটা প্রতিটা ট্যাগের একটা ডিফল্ট display ভ্যালু থেকে আসে — যেমন div-এর ডিফল্ট display: block, আর span-এর ডিফল্ট display: inline। কিন্তু CSS দিয়ে আমরা যেকোনো এলিমেন্টের এই ডিফল্ট ব্যবহার বদলে দিতে পারি।

display: block

নতুন লাইন থেকে শুরু হয়, পুরো width দখল করে নেয়। width, height, margin — সবকিছু কাজ করে:

span {
  display: block;
}
block ১ block ২

এখানে span ডিফল্টভাবে inline হলেও, display: block দেওয়ার পর এটা div-এর মতো আচরণ করছে।

display: inline

লাইনের মধ্যেই বসে থাকে, নিজের কন্টেন্ট যতটুকু জায়গা লাগে ততটুকুই নেয়। এখানে width ও height দিলেও কাজ করে না, আর উপর-নিচের margin/paddingও ঠিকভাবে কাজ করে না:

div {
  display: inline;
}
inline ১
inline ২

এখানে div ডিফল্টভাবে block হলেও, display: inline দেওয়ার পর এটা span-এর মতো পাশাপাশি বসছে।

display: inline-block — দুইয়ের সেরাটা

এই ভ্যালুটা block ও inline-এর সুবিধা একসাথে দেয় — এলিমেন্টগুলো পাশাপাশি বসে (inline-এর মতো), কিন্তু width, height, ও সবদিকের margin/padding ঠিকমতো কাজ করে (block-এর মতো):

div {
  display: inline-block;
  width: 100px;
  height: 60px;
}
বক্স ১
বক্স ২

টিপস: নেভিগেশন মেনুর আইটেম বা প্রোডাক্ট কার্ডগুলোকে পাশাপাশি সাজাতে (Flexbox শেখার আগে) inline-block খুব জনপ্রিয় একটা পুরনো টেকনিক ছিল — আধুনিক ডেভেলপমেন্টে এখন এই কাজে সাধারণত Flexbox ব্যবহার হয় (পর্ব ৬-৭-এ শিখবো), তবে concept হিসেবে এটা জানা জরুরি।

display: none

এলিমেন্টটাকে সম্পূর্ণ লুকিয়ে ফেলে — শুধু চোখের আড়ালে না, এটা পেজে কোনো জায়গাও দখল করবে না, যেন সেটা DOM-এই নেই:

.hidden {
  display: none;
}

এটা মূলত ব্যবহার হয়:

  • Mobile মেনুতে — বড় স্ক্রিনে দেখাবে, ছোট স্ক্রিনে লুকানো থাকবে (Responsive পর্বে দেখবো)
  • JavaScript দিয়ে কোনো এলিমেন্ট শো/হাইড করতে — যেমন Modal, Dropdown, Tab content

visibility: hidden vs display: none

দুটোই এলিমেন্ট অদৃশ্য করে, কিন্তু পার্থক্যটা গুরুত্বপূর্ণ:

Property জায়গা দখল করে?
display: none না — সম্পূর্ণ সরে যায়, বাকি এলিমেন্ট জায়গা নিয়ে নেয়
visibility: hidden হ্যাঁ — জায়গা দখল করেই থাকে, শুধু অদৃশ্য থাকে

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

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Display Property উদাহরণ</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
    }

    nav li {
      display: inline-block;
      margin-right: 15px;
    }

    .promo-banner {
      display: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li>হোম</li>
      <li>সম্পর্কে</li>
      <li>যোগাযোগ</li>
    </ul>
  </nav>

  <div class="promo-banner">
    এই ব্যানারটা display: none থাকায় দেখা যাবে না।
  </div>
</body>
</html>

উপরের উদাহরণে nav li { display: inline-block; } দিয়ে একটা vertical list-কে horizontal মেনুতে রূপান্তর করা হয়েছে — এটা বাস্তব ওয়েবসাইটে খুবই কমন একটা প্যাটার্ন।

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

Exercise:

  1. একটা nav লিস্টকে inline-block দিয়ে horizontal মেনুতে রূপান্তর করো
  2. একটা div-কে display: none দিয়ে লুকাও, তারপর visibility: hidden দিয়ে চেষ্টা করো — পার্থক্যটা লক্ষ করো
  3. তিনটা span-কে display: block দিয়ে আলাদা আলাদা লাইনে ফেলো

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

পর্ব ৫-এ আমরা শিখবো Position property — static, relative, absolute, fixed, ও sticky, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম