如何在表格中的 <i> 标记（图标）之间留出空格？答案

【问题标题】：How to make a space between <i> tags (icons) in table?如何在表格中的 <i> 标记（图标）之间留出空格？
【发布时间】：2022-02-09 20:50:40
【问题描述】：

我有一个经典的 HTML 表格。在一列中，我想添加 3 个带有链接的图标，例如用户进行编辑。我正在使用 twitter-bootstrap 和 glyphsicons。如何在图标之间留出更多空间？？？我更喜欢使用 CSS。

<td>
   <a href='#'>
       <i class='icon-ok'></i>
   </a>
   <a href='#'> 
       <i class='icon-pencil'></i> 
   </a> 
   <a href='#'>
       <i class='icon-remove'></i>
   </a>
</td>

【问题讨论】：

td a i { padding-left: 3px; padding-right: 3px; }
i { 显示：块；边距：0 5px； }。您可以将选择器更改为更具体，并将 5px 更改为您想要的空间宽度
@Stefan Brendle 是的，非常好，谢谢

标签： html css twitter-bootstrap

【解决方案1】：

只需在元素之间应用填充（或边距，具体取决于您使用的样式），例如

td a + a {
   padding-left: 3em;
}

【讨论】：

它跑得像个魅力

【解决方案2】：

你必须在style标签中使用padding属性。

<td>
    <a href='#'><i class='icon-ok'></i></a>
    <a style="padding-left:25px;" href='#'><i class='icon-pencil'></i></a>
    <a style="padding-left:25px;" href='#'><i class='icon-remove'></i></a>
</td>

【讨论】：

【解决方案3】：

只需添加填充；像这样：

i {
padding: 5px;
}

【讨论】：

【解决方案4】：

在 css 中，您可以为您的

添加边距

a {margin-right: 20px;}

【讨论】：

【解决方案5】：

通常 a 标签是内联元素。所以，盒子模型不是你所期望的。我会建议

a {
   display: inline-block;
   margin: 0 10px 0 0;
}

【讨论】：

【解决方案6】：

给他们一个正确的填充（边距对内联元素不起作用）：

.icon-ok { padding-right: 1em; }
.icon-pencil { padding-right: 1em; }

如果要避免最后一个图标后面的空格，可以给周围的表格单元格一个负的右边距（这样两者相互消除）或者使用更复杂的CSS规则来取消最后一个间隙。

【讨论】：