সিএসএস এর display প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলো ওয়েব পেজে কিভাবে প্রদর্শিত বা display হবে তা নির্ধারণ করা হয়।
কোন ওয়েব পেজের লেআউট ডিজাইন করতে সিএসএস এর এই প্রোপার্টির ব্যবহার বেশ গুরুত্বপূর্ণ। সিএসএস এর display প্রোপার্টিতে বহুল ভাবে ব্যাবহৃত 3টি মান হল - inline, block এবং inline-block
টিউটোরিয়াল এর এই অধ্যায়ে আমরা display প্রোপার্টির এই 3টি মান নিয়ে আলোচনা করব।
সিএসএস স্টাইল কোডে display: inline ব্যবহার করলে, এলিমেন্ট গুলো কেবল মাত্র প্রয়োজন অনুযায়ী প্রস্থ বা width সংরক্ষন বা দখল করে। এই এলিমেন্ট গুলো কোন নতুন লাইন তৈরি করে না।
display: inline ব্যবহার করে নিচে একটি উদাহরন দেখুন।
span { display: inline; width: 150px; height: 150px; padding: 10px; border: 2px solid black; background-color: orange; }
এইচটিএমএল ব্লক-লেভেল এলিমেন্ট গুলো সাধারণ ভাবে বাম থেকে ডান দিকের সমস্ত স্থান টুকু সংরক্ষণ করে রাখে অর্থাৎ লাইনের সম্পূর্ন প্রস্থ বা width দখল করে নেয়, এই এলিমেন্টকে আপনি লাইনের বা দিকে বা ডান দিকে, যেদিকেই স্থাপন করেন না কেন, সকল ক্ষেত্রেই লাইনের সম্পূর্ন প্রস্থ সংরক্ষন করে। ব্লক-লেভেল এলিমেন্ট গুলো সব সময় একটি নতুন লাইন তৈরি করে।
নিচে একটি উদাহরন দেখুন, যেখানে display: block ব্যবহার করা হয়েছে।
span { display: block; width: 150px; height: 150px; padding: 10px; border: 2px solid black; background-color: orange; }
display: inline-block ব্যবহার করার ফলে, inline এবং block এর মিলিত ফল পাওয়া যাবে।
নিচে একটি উদাহরন দেখুন, যেখানে display: inline-block ব্যবহার করা হয়েছে।
span { display: inline-block; width: 150px; height: 150px; padding: 10px; border: 2px solid black; background-color: orange; }
inline-block মান ব্যবহার করে, নিচে একটি ন্যাভিগেশন বার তৈরি করা হয়েছে।
.nav { background-color: teal; list-style-type: none; text-align: center; padding: 10px; margin: 0; } .nav li { display: inline-block; font-size: 17px; padding: 18px; }
প্রোপার্টি | বর্ণনা |
---|---|
inline | |
block | |
inline-block |