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

این فاصله به خاطر تراز عنصر خطی بر اساس خط مبنا ( baseline alignment ) ایجاد می شود ومربوط به فضای درنظرگرفته شده برای  descender های حروف می باشد.

توضیح:

در زبان انگلیسی یک سری حروف روی خط مبنا (baseline  ) نوشته می شوند مثل حروف a,b,c  و یک سری حروف هستند که از خط مبنا بیرون می زنند مثل حروف j,g,y ، به این قسمت حروف که از پایین خط مبنا بیرون می زنند  descenderمی گویند.

همانطور که می دانید  مقدار پیش فرض خصوصیت vertical-align  برابر است با baseline ، و این خصوصیت بر روی عناصر خطی یا inline اعمال می شود به این معنی که عناصر خطی در کنار هم نسبت به baseline یا همان خط مبنای عنصر، تراز می شوند.

از طرفی تگ img هم به صورت پیش فرض یک عنصر خطی محسوب می شود مثل حروف و متون و مقدار vertical-align آن هم به طور پیش فرض baseline تعریف شده، یعنی اگر تصویری در کنار یک متن داشته باشیم پایین عنصر تصویر با خط مبنای نوشته در یک راستا خواهد بود .

بنابراین به نظر می رسد این فضای پایین عناصر img برای descender  های متونی که ممکن است در کنارعنصر img  قرار بگیرند، در نظر گرفته شده باشد .

برای اصلاح آن چندین روش وجود دارد که با توجه به شرایط و نوع طرح می توان از آنها استفاده کرد:

• مقدار vertical-align  را از base-line تغییر بدهیم
• مقدار display  رو از inline به block تغییر دهیم
• در بعضی موارد بر حسب شرایط می توان با تغییر مقدار line-height عنصر نگهدارنده این مشکل را برطرف کرد
• در بعضی موارد هم تغییر اندازه فونت عنصر نگهدارنده به صفر نتیجه می دهد