CSS Span: ইনলাইন এলিমেন্টের সম্পূর্ণ গাইড

<span> এলিমেন্ট একটি জেনেরিক HTML এলিমেন্ট, <div>-এর মতো। কিন্তু পার্থক্য: div হলো ব্লক এলিমেন্ট (পুরো সারি ঘেরে), span হলো ইনলাইন এলিমেন্ট (শুধু প্রয়োজনীয় জায়গা নেয়)।

Div vs Span: চিত্রানুসরণ

.div-style { 
  background: purple; 
  color: blanchedalmond; 
  height: auto; 
  padding: 20px; 
  margin: 10px; 
}

.span-style { 
  background: orange; 
  color: black; 
}

Div: পুরো প্রস্থ নেয়, নতুন লাইন থেকে শুরু হয়।
Span: শুধু কন্টেন্টের আকার নেয়, লাইন ব্রেক করে না।

Span-এ Height/Width ব্যবহার করা

Span-এ ডিফল্টভাবে height/width সেট করা যায় না। display: inline-block ব্যবহার করলে সম্ভব।

.highlight { 
  display: inline-block; 
  height: 100px; 
  width: 75%; 
}

Div এবং Span একসাথে ব্যবহার

Div লে আউটের জন্য, Span টেক্সট ইমফাসিস (emphasis) এর জন্য। একটি বাস্তব উদাহরণ:

<div class="container">
  <div class="nav">...</div>
  <div class="sidebar-main-container">
    <div class="sidebar">
      <span>Sidebar Container</span>
    </div>
    <div class="main-container">
      <span>Main Container</span>
    </div>
  </div>
  <div class="footer">
    <span>Footer</span> <span>Container</span> <span>Goes Here</span>
  </div>
</div>

উপসংহার

Div লে আউট কন্টেইনার, Span ইনলাইন টেক্সট স্টাইলিং/ইমফাসিসের জন্য। Span-এ height/width লাগলে display: inline-block ব্যবহার করুন। এই দুটি মিলিয়ে ওয়েবসাইটের বেসিক বিল্ডিং ব্লক তৈরি হয়।