Html Div在SVG标记之后触底

HTML:

如您所见，绿色框（

#my_div

）是几个像素的底部

为什么

#svg_图标

和

#my_div

之间有空格

---

这是小提琴：

只需更改

高度：52px（将高度限制为固定值）至
最小高度：52px（如果内容需要，允许高度增长）


要避免元素之间的垂直间距，请向SVG元素添加
display:block
：

将边距设置为0px，如果不起作用，则尝试定位
位置：'relative'；顶部：'10px'
此gorws父div高度，但子标记之间仍有空间添加
显示：块
对于
#svg_图标
解决了问题您确实提供了两个答案-为什么？你测试过这些了吗？它们有效吗？你测试过提问者的答案了吗。回答得更具体些。你指的是哪一个边距，代码会去哪里？你的选择也一样。就目前而言，这不是一个有用的答案，只是因为你是如何提出它的。
<div id="parent_div">
    <svg id="svg_icon" viewBox="0 0 20 20"><path d="M14.38,3.467l0.232-0.633c0.086-0.226-0.031-0.477-0.264-0.559c-0.229-0.081-0.48,0.033-0.562,0.262l-0.234,0.631C10.695,2.38,7.648,3.89,6.616,6.689l-1.447,3.93l-2.664,1.227c-0.354,0.166-0.337,0.672,0.035,0.805l4.811,1.729c-0.19,1.119,0.445,2.25,1.561,2.65c1.119,0.402,2.341-0.059,2.923-1.039l4.811,1.73c0,0.002,0.002,0.002,0.002,0.002c0.23,0.082,0.484-0.033,0.568-0.262c0.049-0.129,0.029-0.266-0.041-0.377l-1.219-2.586l1.447-3.932C18.435,7.768,17.085,4.676,14.38,3.467 M9.215,16.211c-0.658-0.234-1.054-0.869-1.014-1.523l2.784,0.998C10.588,16.215,9.871,16.447,9.215,16.211 M16.573,10.27l-1.51,4.1c-0.041,0.107-0.037,0.227,0.012,0.33l0.871,1.844l-4.184-1.506l-3.734-1.342l-4.185-1.504l1.864-0.857c0.104-0.049,0.188-0.139,0.229-0.248l1.51-4.098c0.916-2.487,3.708-3.773,6.222-2.868C16.187,5.024,17.489,7.783,16.573,10.27"></path></svg>
    <div id="my_div"></div>
</div>

#parent_div {
  background: #ccc;
  width: 70px;
  height: 52px;
}
#svg_icon {
  background: #900;
  width: 30px;
  height: 30px;
}
#my_div   {
  background: #090;
  width: 30px;
  height: 22px;
}