جلسه ۲۳ : مقدار inline-block در CSS

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش های قبلی دوره با ویژگی Display و مقادیر و کاربرد آن ها تا حدودی آشنا شدیم. در این آموزش قصد داریم به بررسی مقدار inline-block در CSS که ترکیبی از دو مقدار inline و block در خصوصیت Display است بپردازیم. همانطور که تاکنون اشاره کردیم مقدار inline عناصر را در یک خط قرار داده و اندازه عناصر را به حداقل می رساند، اما خاصیت block تمام عرض عنصر والد خود را اشغال می کند. و در هر خط یک عنصر را قرار می دهد، در ادامه ی مباحث حالت inline-block در CSS را بررسی می کنیم.

مقدار inline-block در CSS

در این آموزش کاربرد اصلی حالت inline-block در CSS و تفاوت آن را با دو مقدار inline و block بررسی کرده ایم.

وضعیت display: inline-block

تفاوت حالت display: inline با display: inline-block در این است که inline-block اجازه ی تنظیم عرض و ارتفاع عناصر را می دهد.

همچنین display: inline-block مقادیر margin/padding بالا و پایین عنصر را اعمال می کند. اما در display: inline چنین نیست.

همچنین حالت display: inline-block بر خلاف حالت display: block عناصر دیگر را به خط بعدی منتقل نمی کند.

مثال زیر تفاوت بین حالات display: inline با display: inline-block و  را  display: block نشان می دهد.

استفاده از حالت  inline-block در ایجاد لینک های navigation

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

کلام آخر

در بخش های قبلی با دو وضعیت inline و block آشنا شدیم که هر کدام کاربرد و محدودیت خاص خود را داشته اند. اما با معرفی حالت inline-block در CSS در این بخش، چگونگی استفاده از حالت ترکیبی دو وضعیت قبلی را نشان دادیم، همچنین مقدار inline-block در CSS در ایجاد مواردی از جمله منوهای navigation کاربرد دارد.