顶部边框等于换行文本宽度

Question

在下面的代码中，蓝色块有一个绿色的上线，该上线应该与文本宽度相同，并且不能溢出。与粉色块相似，请注意绿色边框与文本的宽度相同。

我试过使用display: inline，也没有运气。有没有什么方法可以让它正常工作?

小提琴:https://jsfiddle.net/xq10dnb9/

CSS:

html {
font-size: 50px;
}
.blue {
background-color: #a9f4f4;
}
.blocks {
background-color: pink;
width: 700px;
display:flex;
justify-content: space-between;
}
.block {
padding: 5px;
white-space: normal;
}
.block span {
position: relative;
display:inline-block;
/*   display:inline; */
}
.block span:before {
content: '';
height: 4px;
background-color: green;
width: 100%;
position: absolute;
left: 0;
top: 0;
}

HTML:

<div class="blocks">
<div class="block"><span>1 Test</span></div>
<div class="block blue"><span>Test123 Test</span></div>
<div class="block"><span>Testi</span></div>
<div class="block"><span>T asd</span></div>
<div class="block"><span>Testing 5</span></div>
</div>

Answer 1

添加width: min-content:

.block span{
position: relative;
display: inline-block;
border: 1px solid black;
width: min-content;
}

Answer 2

.block {
padding: 5px;
white-space: normal;
}

当你使用padding,时，你可能想要指定你想要添加填充到padding-top, padding-bottom, padding-right or padding-left的地方。如果你只输入padding，它只会在所有的边添加空格。

所以改成

.block {
padding-top: 5px;
white-space: normal;
}

应该可以解决这个问题。然后把这个添加到你的代码

*{
padding: 0;
margin: 0;
}