html - 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;
}

即使包装 div 的高度设置为 auto(其初始值)，它也会以某种方式在其底部添加一些填充，因此比包围的 SVG 高几个像素。绿色区域不应该在那里:

这是为什么？

这是一个您可以玩的实例:https://jsbin.com/huyojeniwi/1/edit?html,css,output

Answer 1

这是因为 svg 图像是行内元素，对于“p”、“q”、“y”等“长”符号，浏览器从底部保存 spase。

有几种解决方法:第一:

.icon { 显示: block ； }

第二个:

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

第三

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