KPC
Kevin Powell - Community•9mo ago
Iyako

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);
}
No description
No description
No description
2 Replies
Iyako
IyakoOP•9mo ago
A better screenshot on how the image "pushes" the text
No description
No description
ἔρως
ἔρως•9mo 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

Did you find this page helpful?