Kevin Powell - Community•8mo ago

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?

<p>
  <img src=\'assets/Divine.png\' alt=\'Image\' class=\'mskill\' id=\'auto\'>
</p>

<p>
  <img src=\'assets/Divine.png\' alt=\'Image\' class=\'mskill\' id=\'auto\'>
</p>

/*This is the icon class*/
.mskill{
  height:15.8px;
  margin-left: 1px;
  margin-right: 1px;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align:bottom;
  top:0; 
  left:0;
}
/*This is the paragraph class*/
.se{
  width: 92%;
  font-family: cslb;
  font-size: 12px;
  color: #000000;
  text-align: justify;  
  white-space: pre-wrap;
  overflow-wrap: break-word;
  align-self: flex-end;
  line-height: 15.8px;
  transform: translate(0, 1px);
}

/*This is the icon class*/
.mskill{
  height:15.8px;
  margin-left: 1px;
  margin-right: 1px;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align:bottom;
  top:0; 
  left:0;
}
/*This is the paragraph class*/
.se{
  width: 92%;
  font-family: cslb;
  font-size: 12px;
  color: #000000;
  text-align: justify;  
  white-space: pre-wrap;
  overflow-wrap: break-word;
  align-self: flex-end;
  line-height: 15.8px;
  transform: translate(0, 1px);
}

2 Replies

IyakoOP•8mo ago

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

ἔρως•8mo ago

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

Gaming

Programming

Increasing size of images in <p> without pushing text.