html - div 标题的窄边框

Question

我想把我的标题放在 div 的顶部中间部分的边框上。以下代码完成了这项工作。

但是，我有很多不同标题的面板。它们的宽度不同。我正在寻找一种方法，使边界紧贴标题。

是否可以实现？

.box{
    border: solid 1px #888;
    padding: 15px 15px;
}

.box span{
    color:red;
    width:200px;
    margin: 0 auto;
    display: block;
    margin-top:-25px;
    background-color:white;
    text-align:center;
}

<div class="box">
<span>panel title</span>
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

Answer 1

使用填充代替宽度，并为跨度提供显示表。

.box span {
    display: table;
    padding: 0 95px;
}