CSS Display

display property নির্ধারণ করে একটি element ব্রাউজারে কেমন আচরণ করবে — block, inline নাকি অন্য কিছু।

block

নতুন লাইন নেয়, পূর্ণ প্রস্থ দখল করে। div, p, h1, section — ডিফল্ট block।

inline

একই লাইনে থাকে, যতটুকু জায়গা লাগে ততটুকু নেয়। span, a, em — ডিফল্ট inline।

inline-block

inline-এর মতো একই লাইনে থাকে, তবে block-এর মতো width, height, padding দিতে পারে।

.tag {
  display: inline-block;
  padding: 4px 10px;
  width: 120px;
}

none

display: none element-কে সম্পূর্ণ লুকিয়ে দেয় — জায়গাও নেয় না। (visibility: hidden শুধু চোখে লুকায়, জায়গা থেকে যায়।)

flex ও grid

.row   { display: flex; }
.profile-card { display: grid; }

flex একমাত্রিক (সারি/স্তম্ভ) লেআউট, grid দ্বিমাত্রিক (সারি + স্তম্ভ) লেআউটের জন্য। এই দুটি আধুনিক লেআউটের প্রাণ — পরবর্তী অধ্যায়ে বিস্তারিত।