HTML div设置padding-bottom 表格过长时块间距显示异常问题

这个异常是块级元素外边距折叠叠加浏览器默认标签样式导致的，和你设置的padding本身无关：

• 浏览器默认给<h4>、<h5>、<table>这类标签都预置了上下外边距，你给外层div设置的padding-bottom:1cm本身是始终生效的
• 当div内表格行数少、整体高度低时，内部元素的默认外边距和div的padding正常叠加，可视间距符合你的预期
• 当表格行数多、整体高度较高时，会触发块级格式化上下文的边距折叠规则：相邻块元素的上下外边距会合并为单个边距，长表格自带的默认下外边距也会在这个过程中被压缩，最终呈现出来的块间距就会比预期小。如果你的页面是用于打印导出，跨页时的分页渲染逻辑会进一步放大这个间距误差。

不要用内边距（padding）控制块之间的外间距，同时主动规避边距折叠、重置浏览器默认样式即可，推荐直接用如下写法替换原有div样式：

<div style="margin-bottom: 1cm; overflow: hidden;">
   <h4>Digital</h4>
   <h5 style="text-align: left; margin: 0.5em 0;">Data Table:</h5>
   <table style="margin: 0; border-collapse: collapse; width: 100%;">
      <!-- 表格内容 -->
   </table>
</div>

关键改动点：

• 将padding-bottom替换为margin-bottom，专门用于控制相邻块级元素的外间距，语义更准确，不会受内部元素布局影响
• 给div添加overflow: hidden触发BFC（块级格式化上下文），从根源禁止内部元素和外部相邻元素发生边距折叠
• 重置h5、table的默认外边距，消除浏览器默认样式带来的不可控间距；给表格加border-collapse: collapse是表格通用样式重置，避免边框、边距的异常渲染

如果你的HTML是用于打印/导出PDF，需要额外添加打印适配样式，在页面<head>标签内加入如下代码即可：

@media print {
  .table-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  table {
    break-inside: auto;
  }
}

给每个外层div加上class="table-block"，这段样式会保证每个带标题的表格块不会被强行拆分到两页，长表格可正常跨页，不会因为分页逻辑挤压块之间的间距。

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