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

【问题标题】：remove bottom padding from font awesome icon从字体真棒图标中删除底部填充
【发布时间】：2021-01-13 05:15:00
【问题描述】：

我正在尝试从字体真棒图标中删除底部填充。我试过this的回答，但没有成功。

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

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>

我该如何解决？

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

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
你正在尝试的可能行不通，因为没有填充应用于该图标。如果您检查并比较fas fa-sort-up 和fas fa-sort-down，您会看到。用于向上排序的底部空间和用于向下排序的顶部空间是字形的一部分。不过，您可以尝试找到一个不同的字形，其中没有此间距。

标签： html css

【解决方案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>

【讨论】：