html - 在标题处停止的框周围创建边框

Question

我想在一些文本周围创建一个框，边框停在标题处。例如，请参见下文。

我找到了 this in an earlier question ，但现在已经 10 岁了，我想知道它是否已经过时，或者是否有更好的修复方法。

我自己也尝试过类似的方法，并且或多或少地做到了。我很好奇是否有实现此目标的首选方法，或者我的方法是否合适。

.welcome-box {
  border: 1px solid #e75d14;
  padding: 0px 20px;
}

.welcome-box h2 {
  margin-top: -18px;
  background-color: #fff;
  display: inline-block;
  padding: 0px 10px;
}

<div class="welcome-box">

<h2>WELCOME</h2>

<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</div>

Answer 1

<fieldset> 和 <legend> 标记默认执行该行为，但如果它用于表单控件以外的其他内容，语义警察可能会感到不安。不管<fieldset> <强> content categories 足以满足任何目的 a <div>允许拥有。

演示

* {
  margin: 0;
}

legend {
  text-align: center;
}

legend h2 {
  padding-bottom: 0
}

<fieldset class="welcome-box">
  <legend>
    <h2>WELCOME</h2>
  </legend>

  <p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
    text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</fieldset>