چرا باید از display:inline-block بجای float استفاده کنیم؟

20 بهمن 1394 - وب

مدتی میشه که دارم از display:inline-block به جای float استفاده می‌کنم. البته نه همه جا ولی خب درصد استفاده‌ش روز به روز داره برام بیشتر میشه.

اوایل به خودم می‌گفتم برای چی باید از float استفاده کنم؟ مشکلات float تا حدودی می‌شناسم و می‌تونم حلشون کنم! ولی بعد گفتم خب چه کاریه از چیزی استفاده کن که مشکلاتش کمتر و کمتر باشه. البته نکته همینه که inline-block هم مشکلات خاص خوش رو داره و یه ویژگی جادویی نیست.

مشکلات float

کاربرد اصلی استفاده از float پخش شدن متن نوشته‌ها به دور عکس یا عنصر دیگه بوده یه جورهایی شبیه به صفحات روزنامه.

مثالی از کاربرد float

مشکل شناخته شده‌ای که وجود داشت این بود که عنصر والدی که داخلش عناصر float شده بودند اون‌ها رو به رسمیت نمی‌شناخت! پس از اینکه عناصری رو float می‌کردیم باید با ترفند clearfix که با روش‌های مختلفی هم اجرا میشد عناصر بعدی و والد رو به حالت عادی بر می‌گردوندیم.

مشکل دیگه‌ای که داره اینه که نمی‌تونید یک عنصر رو به وسط float کنید. یعنی اینکه یا مجبور هستید که اون رو به راست یا چپ float کنید.

تازه یه مشکل دیگه هم وجود داره و اون اینکه عناصر بالا و پایین float قابلیت margin رو از دست می‌دند!

مشکلات display:inline-block

چیزی که واضحه اینه که display:inline-block برای کنار هم قرار دادن عناصر توی یک خط و به حالت بلاک ماننده. ولی چیزی که توی استفاده ازش خیلی مهمه اینه که white spaceها یا به قولی فاصله و تب و نیو لاین رو باید در نظر بگیرید. یعنی اینکه inline-block وایت سپیس‌ها رو رندر می‌کنه. حالا مشکل کجاست؟ مشکل اینجاست که اگر شما پنج‌تا عنصر رو با عرض ۲۰ درصد قرار باشه توی یک خط قرار بدید منطقا باید کنار هم باشند ولی اگه وایت اسپیس بینشون باشه آخرین عنصر میفته پائین و این یعنی یه چیزی بینشونه که همون وایت سپیس‌ها هستند.

برای رفع این مشکل چند‌تا راه حل داریم. اولیش اینکه وایت سپیس‌ها رو کامنت کنیم.

یا اینکه وایت اسپیس ها رو حذف کنیم. اینطوری.

ولی راهی که خودم ترجیحش می‌دم اینه که سایز فونت عنصر والدشون که توی این مثل ul هست رو صفر قرار بدیدم و بعد به عناصر داخلی دوباره سایز فونت مناسب بدیم. اینطوری.

پشتیبانی مرورگرها از inline-block

طبق سایت caniuse تقریبا همه مرورگرها از display: inline-block پشتیبانی می‌کنند. البته جای تعجب نیست که ie6 و ie7 یا حتی ie8 مشکلاتی داشته باشند باهاش همونجوری که دارند ولی راه حل‌هاش هم موجوده. گرچه من دیگه مدت‌هاست به فکر کاربران ie های نسخه پایین نیستم و دلیلی هم نمی‌بینم نگرانشون باشم.