如何在模态框标题区域设置两行文本并消除多余上下间距？

针对你遇到的模态框标题区域上下空白过多的问题，核心原因是默认的modal-header内边距、h2和p元素的默认外边距导致的，直接通过样式调整即可解决：

方法一：利用框架内置间距类（推荐） #

修改标题区域元素的默认间距，同时调整模态框头部的上下内边距：

<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-650px">
  <!--begin::Modal content-->
  <div class="modal-content">
    <!--begin::Modal header-->
    <div class="modal-header py-3"> <!-- 调整上下内边距，按需替换为py-2进一步缩小 -->
      <!--begin::Modal title-->
      <div>
        <h2 class="m-0">Payment Information</h2> <!-- 移除h2默认上下外边距 -->
        <!--begin::Notice-->
        <p class="text-gray-400 fs-6 mt-1 mb-0">Description smth</p> <!-- 移除p默认外边距，用mt-1控制与标题的间距 -->
        <!--end::Notice-->
      </div>
      <!--end::Modal title-->

      <!--begin::Close-->
      <div
        class="btn btn-sm btn-icon btn-active-color-primary"
        data-bs-dismiss="modal"
      >
        <span class="svg-icon svg-icon-1">
          <inline-svg src="media/icons/duotune/arrows/arr061.svg" />
        </span>
      </div>
      <!--end::Close-->
    </div>
    <!--end::Modal header-->
  </div>
</div>

关键调整点：

• 给modal-header加py-3，替换默认的上下内边距
• 给h2加m-0，清除默认上下外边距
• 给p加mb-0 mt-1，清除默认外边距的同时，微调与标题的垂直间距

方法二：自定义CSS（内置类无法满足时使用） #

如果需要更精确的控制，添加自定义CSS：

/* 自定义模态框头部样式 */
.tight-modal-header {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.tight-modal-header h2 {
  margin: 0;
}
.tight-modal-header p {
  margin: 0.5rem 0 0 0;
  line-height: 1.4;
}

然后在HTML中给modal-header添加自定义类：

<div class="modal-header tight-modal-header">
  <!-- 标题内容 -->
</div>

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