Remove div border element for title space-CodePudding

I am trying to achieve this effect below:

How can I get this effect? I want the empty space to adjust to the text. Can anyone give me advice?

.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>

CodePudding user response：

You can use the <fieldset> and <legend>tag.

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

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

CodePudding user response：

Ya you can add a background color and some left and right padding to your box title

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

.box__title {
  position: absolute;
  bottom: 16px;
  left: 30px;
  background: #fff;
  padding: 0 5px;
}

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