display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মূলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।

---

navigation a {
    display: block;
    margin-left: 0.5em;
    padding: 5px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

---

 

display:inline; দিয়ে দেখুন সব a বা এনকর ট্যাগ একলাইনে দেখাবে। এনকর হচ্ছে (<a></a>) ইনলাইন এলিমেন্ট। display:block; দেয়াতে ব্লক লেভেল এলিমেন্টের মত কাজ করেছে। এরুপ <span>, <em> ইত্যাদি ইনলাইন এলিমেন্ট বা যেকোন ইনলাইন এলিমেন্টে কে প্রয়োজনে ব্লক লেভেল করা যায় এই প্রোপার্টিজ দিয়ে।

আবার <p>, <li> ইত্যাদি ব্লক লেভেল এলিমেন্ট যেগুলি ব্রাউজারের সম্পূর্ন width নিয়ে থাকে এবং আগে পিছে লাইন ব্রেক দেয়া থাকে এসবকে ইনলাইন এর মত কাজ করাতে display:inline; করে দিতে হয়। যেমনঃ

 

---

li {
    display: inline;
}

---

 

দেখুন p কিভাবে ইনলাইন এলিমেন্টের মত কাজ করছে। display এর আরেকটা মান আছে যথা "none", এটা দিলে ঐ এলিমেন্টকে লুকিয়ে ফেলবে এবং কোন স্পেসও ধরে রাখবেনা।

জেকোয়েরি দিয়ে কাজ ফর্ম ভেলিডেশন ইত্যাদি কাজে এভাবে এলিমেন্ট অদৃশ্য করে রাখার প্রয়োজন হয়।

উপরের উদাহরনে display:inline; এর জায়গায় display:none; দিয়ে দেখুন অার কিছু দেখাবেনা।

inline-block (display:inline-block) একটা মান আছে এটা দিলে ইনলাইনের মতই কাজ করবে শুধু পার্থক্য হচ্ছে height এবং width এখন এলিমেন্ট টির জন্য কাজ করবে।

সাধারনভাবে ইনলাইন এলিমেন্টের height, width কাজ করেনা।

display:table; দিলে এলিমেন্টটি টেবিলের (<table></table>) মত আচরন করবে।

display:table-cell; দিলে এলিমেন্ট টি <td></td> এর মত কাজ করবে।

table-row দিলে <tr></tr> মত কাজ হবে।

এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।

1. display:inline-table;
2. display:list-item;
3. display:table-caption;
4. display:table-column-group;
5. display:table-header-group;
6. display:table-footer-group;
7. display:table-row-group;
8. display:table-column;
9. display:run-in;
10. display:flex;