我创建使用下面的代码,它封装父元素中的SVG图标的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
感谢为什么空间实际上是附加信息那里! – suamikim
@disstruct这就叫*** kerning ***不*** *** spase ***,阅读更多关于行内框[在这里](https://www.w3.org/TR/CSS2/visuren.html#inline-盒) –
@Ahishek Pandey谢谢。看起来有趣 – disstruct