লেআউট নিয়ন্ত্রণের জন্য display প্রপার্টি সবচেয়ে গুরুত্বপূর্ণ CSS প্রপার্টি।
display প্রপার্টি নির্ধারণ করে একটি এলিমেন্ট প্রদর্শিত হবে কিনা/কীভাবে হবে।
প্রতিটি HTML এলিমেন্টের একটি ডিফল্ট display মান থাকে, যা নির্ভর করে সেটি কোন ধরনের এলিমেন্ট তার উপর। বেশিরভাগ এলিমেন্টের ডিফল্ট display মান হলো block বা
inline।
একটি ব্লক-লেভেল এলিমেন্ট সবসময় একটি নতুন লাইনে শুরু হয় এবং যতটা সম্ভব প্রশস্ততা (বাম ও ডানে যতদূর সম্ভব) দখল করে।
ব্লক-লেভেল এলিমেন্টের উদাহরণ:
একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং শুধু প্রয়োজন অনুযায়ী প্রশস্ততা দখল করে।
এটি একটি প্যারাগ্রাফের ভেতরে একটি ইনলাইন <span> এলিমেন্ট।
ইনলাইন এলিমেন্টের উদাহরণ:
display: none; সাধারণত JavaScript-এর সাথে এলিমেন্ট মুছে ফেলা এবং আবার তৈরি না করেই লুকাতে ও দেখাতে ব্যবহৃত হয়। এটি কীভাবে করা যায় জানতে চাইলে এই পেজের শেষ উদাহরণটি দেখুন।
<script> এলিমেন্ট ডিফল্ট হিসেবে display: none; ব্যবহার করে।
আগেই বলা হয়েছে, প্রতিটি এলিমেন্টের একটি ডিফল্ট display মান থাকে। তবে, আপনি এটি ওভাররাইড করতে পারেন।
একটি ইনলাইন এলিমেন্টকে ব্লক এলিমেন্টে পরিবর্তন করা, বা উল্টোটা, পেজকে নির্দিষ্টভাবে দেখাতে এবং তারপরও ওয়েব স্ট্যান্ডার্ড মেনে চলতে সহায়ক হতে পারে।
একটি সাধারণ উদাহরণ হলো অনুভূমিক মেনুর জন্য ইনলাইন <li> এলিমেন্ট তৈরি করা:
li {
display: inline;
}মনে রাখবেন: একটি এলিমেন্টের display প্রপার্টি সেট করলে শুধু এলিমেন্টটি কীভাবে প্রদর্শিত হবে তা পরিবর্তিত হয়, এটি কোন ধরনের এলিমেন্ট তা নয়। তাই, display: block; সহ একটি ইনলাইন এলিমেন্টের ভেতরে অন্য ব্লক এলিমেন্ট থাকার অনুমতি নেই।
নিচের উদাহরণে এলিমেন্টগুলোকে ব্লক এলিমেন্ট হিসেবে দেখানো হয়েছে:
span {
display: block;
}নিচের উদাহরণে <a> এলিমেন্টগুলোকে ব্লক এলিমেন্ট হিসেবে দেখানো হয়েছে:
HTML CSS JavaScriptএকটি এলিমেন্ট লুকাতে display প্রপার্টি none-এ সেট করা যায়। এলিমেন্টটি লুকানো থাকবে, এবং পেজটি এমনভাবে প্রদর্শিত হবে যেন এলিমেন্টটি সেখানে নেই:
h1.hidden {
display: none;
}visibility:hidden;-ও একটি এলিমেন্ট লুকিয়ে দেয়।
তবে, এলিমেন্টটি আগের মতোই একই জায়গা দখল করে থাকবে। এলিমেন্টটি লুকানো থাকবে, কিন্তু তারপরও লেআউটে প্রভাব ফেলবে:
h1.hidden {
visibility: hidden;
}| প্রপার্টি | বিবরণ |
|---|---|
| display | একটি এলিমেন্ট কীভাবে প্রদর্শিত হবে তা নির্ধারণ করে |
| visibility | একটি এলিমেন্ট দৃশ্যমান হবে কিনা তা নির্ধারণ করে |