从字体真棒图标中删除底部填充

Question

我正在尝试从超赞字体图标中删除底部填充。 我试过这个答案，但没有成功。

这是一个例子。 由于这个填充，我在两个表格行之间有一个不需要的间距（参见示例）。

 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>

我该如何解决？

编辑：最初我将所有代码添加到一个片段中，但后来抱怨说该帖子只是代码。 所以现在我要添加这段文字，希望它足够了。 我明白，SO 有一些规则，但在过去我厌倦了它。 我用例子发布了一个完整的问题，但这还不够好。

Answer 1

问题不在于填充。 图标占据了所有空间。 使用绝对定位

 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>