استفاده از padding بجای line-height

سلام روش های متفاوتی وجود داره بله این کار رو هم میشه کرد

سلام.

علت این چند پیکسل فاصله این هست که img خاصیت inline داره و یه فاصله ی چند پیکسلی از سمت bottom روی عناصر inline وجود داره، شما میتونی بجای img از span داخل پرنت استفاده کنید و line-height رو ۰ در نظر بگیرید، میبینید از پایین یه مقدار فاصله داره. برای تست بیشتر که محدوده هارو ببینید یا از اینسپکت استفاده کنید یا برای تگ داخل و پرنت border: ۱px solid red&black بذارید.

راه حل۱: اما برای حل این موضوع یه راهش اینه که تگ img رو display:block اضافه کنید.

راه حل۲: راه بعدی برای img دستور vertical-align: middle اضافه کنید.

راه حل۳: راه بعدی هم همونطو که در ویدیو آورده شد، line-height رو به پرنت بدید.

در مورد padding به img که بی معنیه چون img که پدینگی نداره(شما تست کردید، شد؟) اگر هم پدینگ بخوایم اضافه کنیم باید به container داده بشه. البته من تست کردم جواب نداد. بعد اگر هم پدینگ باشه باید از همه جهات پدینگ بگیره نه فقط از پایین.

اما نکته ی دیگه، من سؤال این تاپیکو که دیدم، رفتم ویدیو رو دیدم که راه حل ویدیو چی بوده، نکته ای که هست داخل ویدیو علت فاصله ی img از container گفته شده بخاطره اینه که نسبت طول و عرض بهم نمیخونه در صورتی که حتی اگر img رو به صورت مطلق و px طول و ارتفاعشو مقدار دهی کنیم باز هم همین اتفاق میوفته.

مورد دیگه بعد display:table  در clearfix گفته شد هر تصویر در یک ستون قرار گرفن در صورتی که این دستور به after داده شده یعنی به بعد از تگ clearfix و همچنین display:table این مقدار table خاصیتش مثل بلاک عمل میکنه و تفاوتش در فضاییه که اشغال میکنه. یعنی میشد بجای table بلاک کرد. یعنی اگر عناصر در div ای با خاصیت  display:table قرار بگیرن، زیر هم نمایش داده میشن. (img ها بخاطر float: right کنار همن)

https://www.w۳.org/TR/CSS۲۱/tables.html#model

در مورد پیاده سازی table برای مثال تگ های div هم باید بصورت tr td پیاده بشن که پرنت display:table یا display: block میگیره(در این مثال تفاوتی نمیکنه بلاک بذارید یا تیبل) و tr اش display:table-row و td ایش display:table-cell:

<div style="display:table;">

  <div style="display:table-row">
    <div style="display:table-cell">|test1|</div>
    <div style="display:table-cell">|test2|</div>
  </div>
  
  
  <div style="display:table-row">
    <div style="display:table-cell">|test3|</div>
    <div style="display:table-cell">|test4|</div>
  </div>
  
</div>

خروجی:

|test1||test2|
|test3||test4|