display: inline-এর তুলনায়, প্রধান পার্থক্য হলো display: inline-block এলিমেন্টে width এবং height সেট করার সুযোগ দেয়।
এছাড়াও, display: inline-block-এ, উপরে ও নিচের margin/padding মান্য করা হয়, কিন্তু display: inline-এ তা হয় না।
display: block-এর তুলনায়, প্রধান পার্থক্য হলো display: inline-block এলিমেন্টের পরে লাইন-ব্রেক যোগ করে না, তাই এলিমেন্টটি অন্য এলিমেন্টের পাশে বসতে পারে।
নিচের উদাহরণে display: inline, display: inline-block
এবং display: block-এর ভিন্ন ভিন্ন আচরণ দেখানো হয়েছে:
span.a {
display: inline; /* span-এর জন্য ডিফল্ট */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}display: inline-block-এর একটি সাধারণ ব্যবহার হলো লিস্ট আইটেমগুলোকে উল্লম্বভাবে না দেখিয়ে অনুভূমিকভাবে দেখানো। নিচের উদাহরণে অনুভূমিক নেভিগেশন লিঙ্ক তৈরি করা হয়েছে:
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}ডিফল্টভাবে, লিস্ট আইটেমগুলো উল্লম্বভাবে প্রদর্শিত হয়। এই উদাহরণে আমরা সেগুলো অনুভূমিকভাবে (পাশাপাশি) দেখাতে display: inline-block ব্যবহার করেছি।
মনে রাখবেন: ব্রাউজার উইন্ডো রিসাইজ করলে, বেশি সংকুচিত হয়ে গেলে লিঙ্কগুলো স্বয়ংক্রিয়ভাবে ভেঙে যাবে।