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

Question

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

我在 <i> 标签内有一个 svg 图标。这是我的图标的基本块，放置在我整个页面的不同位置。为了这个例子，我把它放在一个简单的 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 因为它代表 我们无法控制的内容区域。

此处有更多详细信息：

也相关：以更好地理解 line-height 的工作原理，因为它并不总是直观的。

另一个显示行框和内容区域之间的区别：

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

Why <i> tag height is bigger than its contents?

html

css

svg

font-size