مشکل در ارتفاع عناصر

سلام
آیا در ابتدای کدهاتون از reset.css یا normalize.css استفاده کرده اید؟

به نظر میرسه که مشکل تون عدم استفاده از چنین فایل هایی هستش.

در غیر اینصورت، لطفا این بخش از کدهارو قرار بدید تا بشه بررسی کرد و تشخیص داد علت چی می تونه باشه.
اگر در جایی بارگذاری کردید هم می تونید نشانی سایت تون رو قرار بدین.

دوست عزیز راجب استایلهایی که مرورگرهای مختلف اضافه میکنن میتونین تو با زدن f12 تو کروم و بخشهای user agent stylesheet مشهاده کنید

سلام
@kiangh

بین کروم و موزیلا همیشه تفاوت هایی بوده که باید از ریست css ها در طراحی استفاده کنید
https://gist.github.com/DavidWells/18e73022e723037a50d6

برای اینکه متوجه بشی مشکل از کجاست کافی روی همون بخشی که ارتفاعش زیاده کلیک راست کنی و گزینه inspect رو بزنی. یه پنچره باز می شه که کدهایی که نوشتی html و css و ... رو برات می یاره. از بخش سمت چپ بلاک کدهای html ات رو می بینی که روی هر کدوم کلیک کنی سمت راست کدهای css ات رو خواهی دید. اونجا می تونی بفهمی که چه کد css ای هست که باعث می شه این مشکل اتفاق بیافته. گاهی اوقات پیش می یاد که تو استایلی مستقیم برای اون element ننوشتی حالا یا داره از عنصر پدرش ارث بری می کنه یا همون که ذکر شد از خصوصیات پیش فرض مروگر. اینجا در سمت راست به جای تب styles که کدهای css تو رو نوشته قسمت cumputed رو هم اگر نگاه بندازی تو گوگل کروم می بینی که تمام کدهایی که تو نوشتی برای اون element یا از پدرش ارث بری کرده و یا خود مرورگر داره بهش می ده نوشته شده.
اون چیزی که من دارم تو تصویر می بینم اینه که شما ارتفاع به عنصرت ندادی و احتمالا داری از flex استفاده می کنی. فکر کنم با اضافه کردن این دوتا خط کد بتونی مشکلت رو حل کنی. اول اینکه به اون باکسی که متن داخلش هست یه ارتفاع به پیکسل بدی دوم هم این کد رو بنویسی:

*{
    box-sizing: border-box;
}