5 replies

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);
}

KP-C

Kevin Powell - Community•2y ago•

5 replies

Iyako

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

<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);
}

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

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

Similar Threads

Similar Threads

Similar Threads