如何实现div边框在标题位置预留随文本自适应的空白效果

你当前代码的核心问题是.box__title使用了绝对定位，元素脱离了正常文档流，父容器.box无法感知到标题的内容高度，自然无法实现空白区域随文本自适应。

推荐两种实现方案：

方案1：内边距实现（兼容性最优，适合简单场景） #

直接用父容器内边距预留空白，无需绝对定位，父容器高度会自动跟随标题内容撑开：

.box {
  border: 1px solid black;
  /* 上下16px、左右30px内边距，和你原设定的位置参数对应 */
  padding: 16px 30px;
}

.box__title {
  /* 清除h2标签默认外边距，避免产生多余空白 */
  margin: 0;
}

HTML代码无需修改，不管标题是单行、多行，都会自动适配空白区域。

方案2：Flex布局（适合容器内有多个元素的复杂场景） #

如果后续需要在容器内添加其他元素（比如右上角标签、操作按钮等），用Flex布局调整更灵活，也能保持标题贴底的效果：

.box {
  border: 1px solid black;
  display: flex;
  align-items: flex-end;
  min-height: 50px;
  padding: 16px 30px;
}

.box__title {
  margin: 0;
}

除非有特殊的层叠展示需求，不建议用绝对定位放置普通文本类内容，很容易出现高度塌陷、文本溢出的问题。

内容的提问来源于stack exchange，提问作者Dave