div的自动高度不符合其SVG图标子级的高度

Question

我创建了一个SVG图标组件，该组件使用以下代码将SVG图标包装在父元素中：

的HTML

<div class="icon-wrapper">
  <svg class="icon">
    <!--
    The "icon-search" symbol comes from a SVG sprite in the doc body.
    See live demo below...
    -->
    <use xlink:href="#icon-search"></use>
  </svg>
</div>

的CSS

body {
  font-size: 48px;
  color: black;
}

.icon-wrapper {
  background-color: lightgreen;
}

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

  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;

  background-color: red;
}

即使将wrap div的高度设置为auto（其初始值），它还是会在其底部添加一些填充，因此比包围的SVG高几个像素。绿色区域不应存在：

为什么是这样？

这是您可以使用的实时示例：https : //jsbin.com/huyojeniwi/1/edit?html,css,output

Answer 1

这是因为svg图像是内联元素，并且浏览器从底部保存了诸如“ p”，“ q”，“ y”之类的“长”符号的spase。

有几种解决方案：第一：

.icon { display: block; }

第二：

.icon-wrapper { font-size: 0; } .icon { font-size: 48px; }

第三

.icon-wrapper { line-heigth: 1em; } .icon { vertical-align: top }