از ویژگی Display برای تعیین چارچوب عناصر HTML استفاده می شود.
همانطور که به خاطر دارید مقدار inline به این شکل بود که عنصر HTML تنها به اندازه محتوای درونی خود عرض و ارتفاع می گرفت و ویژگی های width و height را نمی پذیرفت. مقدار inline-block رفتار عنصر را شبیه به رفتار inline می کند با این تفاوت که می توان به عنصر عرض و ارتفاع داد. نکته دیگری که وجود دارد این است که در حالت inline ویژگی های margin و padding برای قسمت های بالا و پایین عنصر کار نمی کند. اما در حالت inline-block این ویژگی درنظر گرفته و اعمال می شود.
در مقایسه با حالت block بزرگترین فرق این است که در حالت inline-block بعد از عنصر مورد نظر عناصر دیگر می توانند در کنار آن قرار بگیرند.
مثال زیر تفاوت بین عملکرد display: inline و display: inline-block و display: block را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
استفاده از inline-block برای ساخت لینک ناوبری
کاربرد متعارف برای inline-block ، نمایش دادن آیتم های لیست بصورت افقی به جای عمودی می باشد. مثال زیر لینک های ناوبری افقی درست می کند:
خروجی مثال بالا به شکل زیر است:
