As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and sveltekit.
Whenever I come across something I like in a tutorial or any other source and want to incorporate it into my project, the pasted example always appears larger than the original tutorial. Even though both have the same dimensions in pixels when inspected through CSS, there seems to be some discrepancy where my pixel size ends up being bigger. For instance, I recently copied some buttons from the daisyUI component example site, which you can check out here:
I made sure to copy the HTML verbatim from daisyUI. Initially, I thought perhaps there was a difference in the base font size, but after comparing the styles from both my site and daisyUI and running a diff, I couldn't identify any significant variation. This issue persists across all sites, including codepen and the tailwindcss site. The comparison below illustrates that both are supposedly 64x64 in size; however, mine displays significantly larger.
While it's possible that svelte might be playing a role in causing this discrepancy, I am unsure how exactly that could happen.