برطرف کردن فضای اضافه خالی از پایین image



visibility  
mode_comment   ۰

در این مطلب میخوام یک مشکل متداول که تقریبا برای همه تا حالا پیش اومده و دردسر ساز هست رو بهتون توضیح بدم و راه حل اون رو بهتون آموزش بدم تا این مشکل رو از این به بعد به راحتی حل کنید. مشکل اینه که وقتی مثلا یک div داریم و یک تصویر رو درون اون قرار میدیم، یک فضای خالی اضافه و ناخواسته در پایین image به وجود میاد که اگر کسی ندونه مشکل چیه میتونه وقت زیادی رو ازش بگیره و تلف کنه.

کد زیر رو ببینید:

همونطور که میبینید یک تصویر رو درون یک div قرار دادیم. برای div یک border قرمز قرار میدم تا اون رو بهتر ببینید. حالا اگر کد بالا رو درون مرورگر باز کنید بصورت زیر خواهد بود:

همونطور که میبینید یک فضای اضافی در پایین image وجود داره که ظاهر رو خراب میکنه. این رفتار به این دلیل هست که تصاویر بصورت پیش فرض inline هستند و مانند یک کاراکتر متنی با اونا برخورد میشه. تصاویر بر روی همون خطی میشینن که حروف a و b و ... بر روی اون میشینن. در متون یک فضای خالی برای حروفی که قسمتی از اونا در زیر خط قرار میگیره مانند g و p و ... در نظر گرفته میشه.

خب برای حل مشکل بالا میتونین 2 کار رو انجام بدین. روش اول اینه که display تصویر رو از inline بودن خارج کنید. مثلا اون رو block قرار بدین. با اینکار مشکل حل میشه.

کار دیگه ای که میتونین انجام بدین استفاده از ویژگی vertical-align هست. میتونین با قرار دادن مقدار top یا bottom یا middle این فضای خالی رو به راحتی حذف کنید.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.