自适应高度的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 的高度设置为自动（初始值），但它在底部添加了一些填充，因此比周围的 SVG 高出几个像素。绿色区域不应该存在：

为什么会这样？

以下是一个实时示例，您可以进行操作：https://jsbin.com/huyojeniwi/1/edit?html,css,output

- suamikim

Answer 1

这是因为SVG图像是内联元素，浏览器会为“长”符号（如“p”，“q”，“y”）从底部保存空间。

有几种解决方案：

第一种：

.icon { display: block; }

第二种：

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

第三

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

- disstruct

---

感谢您提供有关为什么实际上需要该空格的额外信息！ - suamikim

@disstruct 这被称为字距调整而不是空格，在这里阅读更多关于内联框的信息：[https://www.w3.org/TR/CSS2/visuren.html#inline-boxes] - Abhishek Pandey

@AbhishekPandey 不是的，它们是下降字母，字距是指相邻字形之间的间距。 - Robert Longson

@RobertLongson 哦！我不知道它们是“下降部分”，谢谢纠正。 :) - Abhishek Pandey

Answer 2

之所以会发生这种情况，是因为svg标记是一个inline-block元素，将父元素设置为line-height:0;即可解决此问题。

行内框从它们的块级父元素继承可继承属性，如font-size、line-height等，并创建空间/边距。

更多信息

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

.icon-wrapper {
  background-color: lightgreen;
  line-height: 0;
}

.icon {
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  background-color: red;
}

<!-- Inlined SVG sprite -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="icon-search" viewBox="0 0 26 28">
        <title>search</title>
        <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path>
      </symbol>
    </defs>
  </svg>

<div class="icon-wrapper">
  <svg class="icon">
      <use xlink:href="#icon-search"></use>
    </svg>
</div>

- Abhishek Pandey