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

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">☉</span> foo</div><br>
<div><span class="box">&bull;</span> foo</div>

Result

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

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

Answer 1

您可以手动定义行高：

.box{
  line-height: 24px;
}

Answer 2

请更新您的 CSS。你可以设置行高

<!DOCTYPE html>
<html>
<head>
<style>
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;
 padding:2px;
 line-height: 24px;
}

</style>
</head>
<body>

<div><span class="box">☉</span> foo</div><br>
<div><span class="box">&bull;</span> foo</div><br>
<div><span class="box">&#8226;</span> foo</div><br>
<div><span class="box">&#8364;</span> foo</div>




</body>
</html>

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

Why do some characters change the overall line height, and how can this be fixed?

html

css

height