html - 为什么某些字符会改变整体行高，如何解决？

Question

由于某种原因，在使用某些字符时，行高的缩进会发生变化：

div {
 width: auto;
 margin: 8px;
 padding: 8px;
 display: inline-block;
 border: 1px solid blue;
}

.box {
 width: 22px;
 height: 22px;
 color: green;
 text-align: center;
 display: inline-block;
 background-color: #eee;
 border: 1px solid red;
}

<div><span class="box">☉&lt;/span> foo</div><br>
<div><span class="box">&bull;</span> foo</div>

结果

在这张图片中，您可以看到有一个像素的差异。

我查看了许多 CSS 属性，但找不到任何可以最初指定所需缩进的属性。

标签： htmlcssheight

Answer 1

您可以手动定义行高：

.box{
  line-height: 24px;
}