Css 如何删除processbar到父元素的距离

我使用HTML5元素

创建进度条

现在我想在进度条和相关文本之间几乎没有空格的情况下，在进度条顶部添加一个相关文本。但是：酒吧和他的下一个邻居元素之间总是有一个空格，如下所示：

使用ChromeDeveloper工具，我发现这个空间是从进度条父元素生成的。

但是：

前两个

元素在没有空间的情况下更接近。但是在第二个和第三个

元素之间有一个空格

原因可能是什么？如何移除该空间

顺便说一句：将progressbar div向上移动一些像素对我来说不是一个选项。。像这样：

<div style="position:relative;top:-5px;">
    <progress class="smallProgressBar" id='p' max='100' value='45'>
    </progress>
</div>

---

尝试将

行高：0

添加到包含

进度的
div
。例如：

<div class="progress-bar">
<progress class="smallProgressBar" id='p' max='100' value='45'></progress>
</div>

.progress-bar {
    line-height: 0;
}


.进度条{
线高：0；
}

.
您可以使用
:after
:pseudo元素

绝对定位：伪元素


.smallProgressBar{
宽度：100%；
字体大小：0.5em；
位置：相对位置；
z指数：-1；
}
#小的{
位置：相对位置；
}
#小：以前{
位置：绝对位置；
内容：“与progressbar相关的文本…”；
顶部：-1px；
字体大小：6px；
颜色：红色；
左：0；
}

进展

<div style="position:relative;top:-5px;">
    <progress class="smallProgressBar" id='p' max='100' value='45'>
    </progress>
</div>

<div class="progress-bar">
<progress class="smallProgressBar" id='p' max='100' value='45'></progress>
</div>

.progress-bar {
    line-height: 0;
}