删除标题空间的 div 边框元素

Question

我正在尝试实现以下效果：

我怎样才能得到这个效果？我希望空白区域能够适应文本。谁能给我建议吗？

.box {
  border: 1px solid black;
  position: relative;
  min-height: 50px;
}

.box__title {
  position: absolute;
  bottom: 16px;
  left: 30px;
}

<div class="box">
<h2 class="box__title">Box title</h2>
</div>

Answer 1

您可以使用<fieldset>和<legend>标签。

<fieldset>
    <legend>Box Title</legend>

    <h1>More stuff here!</h1>
</fieldset>