如何在HTML中让内容超出边框显示？

以下是几种可直接落地的实现方式，可根据你的布局场景选择：

1. 相对定位偏移文本 #

若文本与边框容器为父子关系，给文本设置相对定位，通过偏移属性将其移出边框：

/* 带边框的容器 */
.border-box {
  border: 2px solid #333;
  padding: 20px;
  position: relative; /* 作为文本定位的参考基准 */
}

/* 需要移出的Test文本 */
.test-text {
  position: relative;
  top: -30px; /* 向上偏移至边框外部 */
  left: 15px;
  background: #fff; /* 避免文本与边框重叠时被遮挡 */
}

2. 绝对定位脱离文档流 #

如果无需文本占据原布局空间，绝对定位的灵活性更高，同样需要给父容器设置position: relative：

.border-box {
  border: 2px solid #333;
  padding: 20px;
  position: relative;
  margin-top: 30px; /* 预留文本空间，防止页面布局错乱 */
}

.test-text {
  position: absolute;
  top: -16px; /* 向上偏移到边框外侧 */
  left: 20px;
  background: #fff;
}

3. 行内元素用负外边距偏移 #

若文本是行内/行内块元素，可直接用负外边距实现偏移：

.border-box {
  border: 2px solid #333;
  padding: 20px;
}

.test-text {
  display: inline-block;
  margin-top: -30px;
  margin-left: 15px;
  background: #fff;
}

注：添加background是为了让文本覆盖页面背景，避免与边框或其他内容重叠影响可读性，可根据实际页面背景色调整。

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