Bootstrap 5.0：消除Identity UI中Row内H1与DIV间隙并修正H1高度

可能的问题原因 #

• Bootstrap默认<h1>的margin-bottom、line-height被全局样式或自定义CSS覆盖，导致上下间距过大
• #identity容器（row类）的间距变量（--bs-gutter-x/y）间接影响了内部元素的布局空间
• H1继承了父元素的异常内边距/外边距，或者被设置了过大的padding-top/padding-bottom，导致实际高度远超预期

针对性CSS修复方案 #

1. 修正H1高度异常 #

通过精准选择器限制#identity内H1的样式，强制控制高度与间距：

#identity h1 {
  /* 重置上下外边距，避免额外留白 */
  margin-top: 0;
  margin-bottom: 1rem;
  /* 限制行高，避免因文本换行或行高过大拉高元素高度 */
  line-height: 1.2;
  /* 移除可能存在的多余内边距 */
  padding-top: 0;
  padding-bottom: 0;
  /* 强制设置最大高度，确保符合100-150px的预期范围 */
  max-height: 150px;
  /* 可选：若H1内容溢出，设置溢出处理避免布局混乱 */
  overflow: hidden;
}

2. 消除H1与下方DIV的间隙 #

如果间隙来自下方DIV的默认上边距，直接重置紧邻元素的样式：

#identity h1 + div {
  margin-top: 0;
}

3. 修复容器间距影响 #

若row容器的默认 gutter 间接导致布局留白，调整其间距变量：

#identity {
  /* 重置row的左右内边距 */
  --bs-gutter-x: 0;
  /* 若容器上下有多余间距，一并重置 */
  --bs-gutter-y: 0;
}

调试验证步骤 #

1. 打开浏览器开发者工具（F12），选中H1元素
2. 查看计算样式面板，确认height、margin、padding、line-height的实际取值，定位异常属性
3. 检查是否有其他样式规则（如全局h1样式）覆盖了当前设置，通过提升选择器优先级（#identity h1）确保自定义样式生效

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