Html 如何确保包含span的div的大小为div

我想确保包含span的div是span的大小，而不考虑span中使用的字体

简单的例子：

.boxName{
显示：块；
位置：相对位置；
边框：1px纯黄色；
最小高度：0%；
}
跨度{
背景色：黑色；
颜色：白色；
字体大小：1vw；
}

标题

将字体大小添加到

div

而不是

span

.boxName{
显示：块；
位置：相对位置；
边框：1px纯黄色；
最小高度：0%；
字体大小：1vw；
}
跨度{
背景色：黑色；
颜色：白色；
}

标题

添加

宽度：最小内容到您的div

.boxName {
    display: block;
    position: relative;
    border: 1px solid yellow;
    min-height: 0%;
    width:min-content;
}

这是因为您正在使用
显示
属性上的
块
值

更改为
内联块
：

.boxName {
    display: inline-block;
    position: relative;
    border: 1px solid yellow;
    min-height: 0%;
}

span {
    background-color: black;
    color: white;    
    font-size: 1vw;
}


.boxName{
显示：内联块；
位置：相对位置；
边框：1px纯黄色；
最小高度：0%；
}
跨度{
背景色：黑色；
颜色：白色；
字体大小：1vw；
}

标题
设置
显示：块至
span
和
宽度：适合内容


.boxName{
显示：块；
位置：相对位置；
边框：1px纯黄色；
最小高度：0%；
}
跨度{
宽度：适合的内容；
背景色：黑色；
颜色：白色；
字体大小：1vw；
显示：块；
}

标题
添加
显示：flex在box div上



.boxName{
显示器：flex；
位置：相对位置；
边框：1px纯黄色；
最小高度：0%；
}
跨度{
背景色：黑色；
颜色：白色；
字体大小：3vw；
}

标题
对div
使用
display:flex
.boxName
，这样它就可以正常工作了。也不需要<代码>最小高度：0%


您可以从这里了解更多信息
更多信息，请告诉我help@VXp有趣的但我对自己说。。。我真的很喜欢帮助别人。。。你明白我的意思吗@VXp，但就像在开发中一样，你必须始终如一。我可以看出，但是你每次都要写吗？我认为这很明显谢谢你的回答。此解决方案的挑战是，在更改span的显示以阻止整行（或div）后，整行（或div）是黑色的-在我的示例中，只有文本的背景是黑色的。字体大小增加了内容的高度和宽度，因此父级会简单地展开。