gpt4 book ai didi

html - SVG标签后div触底

转载 作者:行者123 更新时间:2023-11-28 15:08:29 31 4
gpt4 key购买 nike

HTML:

<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>

CSS:

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

如您所见,绿色框 (#my_div) 已触底几个像素。

为什么 #svg_icon#my_div 之间有空格?

这是 fiddle :https://jsfiddle.net/91nah43k/4/

最佳答案

只需将父 DIV 的 height: 52px;(将高度限制为固定值)更改为 min-height: 52px;(允许高度为如果内容需要,就增长)。

https://jsfiddle.net/0vuz16ad/

为避免元素之间的垂直空间,将 display: block 添加到 SVG 元素:

https://jsfiddle.net/x6etqjwd/

关于html - SVG标签后div触底,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54053379/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com