مقدار Inline-Block در CSS

در این بخش از آموزش طراحی سایت به آموزش مقدار Inline-block در CSS می پردازیم.

مقدار Inline-Block در CSS

از ویژگی 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 برای ساخت لینک ناوبری

کاربرد متعارف برای inline-block ، نمایش دادن آیتم های لیست بصورت افقی به جای عمودی می باشد. مثال زیر لینک های ناوبری افقی درست می کند:

آموزش عناصر inline-block

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

آموزش طراحی سایت آموزش مقدار inline-block آموزش طراحی وب سایت آموزش CSS آموزش HTML