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

【问题标题】：Why do some characters change the overall line height, and how can this be fixed?为什么某些字符会改变整体行高，如何解决？
【发布时间】：2021-07-28 03:08:55
【问题描述】：

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

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 属性，但找不到任何可以最初指定所需缩进的属性。

【问题讨论】：

垂直对齐：中间；到 .box 元素。改变的是行高，改变的是对齐方式
@TemaniAfif 是的，它也有助于解决我的问题。
在我之前的评论中，我的意思是它不是行高（忘记不是）
@TemaniAfif 我明白了
@TemaniAfif 也许这应该作为答案添加？

标签： html css height

【解决方案1】：

您可以手动定义行高：

.box{
  line-height: 24px;
}

【讨论】：

看起来你的解决方案有效，但我不明白为什么对于每个 span 元素，这个值在 Inspector 中没有改变并且默认设置为 20px？

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

【讨论】：

是的，但我不明白为什么，对于每个 span 元素，这个值在 Inspector 中没有变化，并且默认设置为 20px？
常用来设置文本行间距。在块级元素上，它指定元素内行框的最小高度。但在不可替换的内联元素上，它指定了用于计算行框高度的高度。