为什么 <i> 标签高度大于其内容？

Question

我创建了小片段来说明问题。

我svg在<i>标签内有一个图标。这是我的图标的基本块，放置在我整个页面的各个位置。为了这个例子，我把它放在一个简单的 div 容器中。

如果您检查下面示例的结果，您会发现<i>标签的高度与预期33px不符30px。我的问题是为什么会发生这种情况以及如何预防？

.container {
  font-size: 30px;
}

.icon {
  line-height: 1;
}

.icon svg {
  height: 1em;
  width: 1em;
}

<div class="container">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>

Answer 1

为了防止它制作i内联块并纠正 SVG 的对齐方式。

.container {
  font-size: 30px;
  height: 30px;
  width: 30px;
}

.icon {
  line-height: 1;
  display:inline-block;
}

.icon svg {
  height: 1em;
  width: 1em;
  vertical-align:top;
}

<div class="container">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>

为什么有点棘手，并且与字体有关。基本上，i作为内联元素的高度取决于字体属性和设置line-height:1是不够的

为了更好地说明：

$('i').each(function(){
 console.log("i element: "+$(this).css('height')+" SVG: "+ $(this).find('svg').css('height'));
})

.container {
  font-size: 30px;
  height: 30px;
  width: 30px;
  line-height: 0;
  margin:10px;
}

.icon {
  line-height: 0;
  background:green;  
}

.icon svg {
  height: 1em;
  width: 1em;
  vertical-align:top;
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>

<div class="container" style="font-family:monospace">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>

<div class="container" style="font-family:cursive">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>

如您所见，我们有相同的font-size和line-height设置为0并且我们仍然有i更大的，因为它代表我们无法控制的内容区域。

此处有更多详细信息：Can specific text character change the line height

还相关：内联块元素的行高问题，以更好地理解如何line-height工作，因为它并不总是直观的。

另一个显示行框和内容区域的区别：为什么行框之间有空间，不是由于半导数？