Increasing size of images in <p> without pushing text.
For context, I'm making a card maker website that translates text into icons and export them out as pngs.
Problem is some icons have different sizes and decoration. For example the Divine Skill Icon has a X type of decoration making the icon tall but it's actually really small
So I want to increase the size of some icons. However when the image heigh is now taller than the line-height of the paragraph it pushes the text up which is not wanted.
Is there a way to increase the size of the image without affecting line-height?



2 Replies
A better screenshot on how the image "pushes" the text


how about you use an inline svg that have all the
<symbol>
you want to show, with the <image>
inside?
then, you can just <use>
the <symbol>
and you style the <symbol>
at your will
you can have the custom sizes you need per icon in the <image>
instead, and everything will always have the same size
by the way, if you use my idea, you need to use your own custom lazy loading for the images