为什么< i>标签高度大于其内容? [英] Why <i> tag height is bigger than its contents?

问题描述

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

I created small snippet to illustrate the problem.

我在<i>标记内有一个svg图标.这是我图标的基本块，放置在我的页面的各个位置.为了这个示例，我将其放置在一个简单的div容器中.

I have a svg icon inside <i> tag. This is a basic block for my icons, placed throughout my page in various places. For the sake of this example I placed it inside a simple div container.

如果查看下面示例的结果，则可以看到<i>标签的高度为33px，而不是预期的30px.我的问题是为什么会发生这种情况以及如何预防呢?

If you inspect the result of an example below you can see that <i> tag has height of 33px not 30px as expected. My question is why is that happening and how to prevent it?

.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>

推荐答案

为防止出现这种情况，请使i内联块并更正SVG的对齐方式.

To prevent it make the i inline-block and correct the alignment of the 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不够

The why is a bit tricky and is font related. Basically, the height of the i which is an inline element depend on the font properties and setting line-height:1 isn't enough

为了更好地说明:

$('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设置为较大，因为它代表了内容区域，我们无法控制.

As you can see, we have the same font-size and line-height is set to 0 and we still have the i bigger because it represent the content area that we cannot control.

此处有更多详细信息:特定文本字符能否更改行高

More details here: Can specific text character change the line height

也相关:内联块元素的行高问题可以更好地理解line-height的工作原理，因为它并不总是直观.

Also related: Line height issue with inline-block elements to better understand how line-height works because it's not always intuitive.

另一种显示线框和内容区域之间差异的方法:为什么线框之间有空间，而不是由于一半的前导?

Another one to show the difference between line box and content area: Why is there space between line boxes, not due to half leading?

这篇关于为什么< i>标签高度大于其内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！