remove bottom padding from font awesome icon

Question

I'm trying to remove the bottom padding from a font awesome icon. I tried this answer, but no success.

Here is an example. Because of this padding I have an unwanted spacing between the two table rows (see example).

 table { width: 100%; table-layout: fixed; }.firstrow > td { padding-top: 10px; }.datarow > td > div { overflow: hidden; padding-top: 5px; font-size: 16px; }.datarow > td > div > div { float: left; padding-right: 5px }

 <script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script> <table> <tr class="dx-theme-accent-as-text-color" style="font-weight: bold"> <td>{{frc.version}}</td> </tr> <tr class="firstrow"> <td>VA</td> <td>BA</td> <td>Bevétel</td> </tr> <tr class="datarow"> <td> <div> <div>-10,25M€</div> <i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i> </div> </td> <td> <div> <div>-20,99M€</div> <i class="fas fa-sort-up" style="font-size: 32px; color: #d9534f;"></i> </div> </td> <td> <div> <div>175,52M€</div> <i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i> </div> </td> </tr> <tr> <td> <div style="overflow: hidden; font-size: smaller;"> <div style="float: left; color: #5cb85c">+0,45</div> <div style="float: left; padding: 0px 2px 0px 2px">/</div> <div style="float: left; color: #5cb85c">+1,25%</div> </div> </td> <td></td> <td></td> </tr> </table>

How can I solve it?

EDIT: originally I added all the code to a snippet, but then SO complained, that the post is just only code. So now I'm adding this text, hoping, that it will be enough. I understand, that SO has some rules, but in the past time I got tired of it. I post a fully question with example and it isn't good enough.

Answer 1

the problem isn't padding. The icon occupies all that space. Use absolute positioning

 table { width: 100%; table-layout: fixed; }.firstrow > td { padding-top: 10px; }.datarow > td > div { overflow: hidden; padding-top: 5px; font-size: 16px; }.datarow > td > div > div { float: left; padding-right: 5px }

 <script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script> <table> <tr class="dx-theme-accent-as-text-color" style="font-weight: bold"> <td>{{frc.version}}</td> </tr> <tr class="firstrow"> <td>VA</td> <td>BA</td> <td>Bevétel</td> </tr> <tr class="datarow"> <td> <div> <div style='position:relative'>-10,25M€ <i style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' class="fas fa-sort-up" ></i></div> </div> </td> <td> <div> <div style='position:relative'>-20,99M€ <i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color:#d9534f;'></i></div> </div> </td> <td> <div> <div style='position:relative'>175,52M€ <i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' ></i> </div></div> </td> </tr> <tr> <td> <div style="overflow: hidden; font-size: smaller;"> <div style="float: left; color: #5cb85c">+0,45</div> <div style="float: left; padding: 0px 2px 0px 2px">/</div> <div style="float: left; color: #5cb85c">+1,25%</div> </div> </td> <td></td> <td></td> </tr> </table>