html - 如何删除“page-break-before：always”CSS上方的意外空白

Question

有关可重现的示例，请参阅此链接 - https://cbbanalytics.com/stats/27694/games/1864019/overview。在这个页面上，我们已经（通过类print-break）向带有斯坦福标志和文本page-break-before: always的元素添加了一个 CSS ，如下所示。目标是在打印或保存时创建一个整洁的 PDF。<h3>Stanford Team Shot Charts

. . .

打印此页面或保存为 PDF 时，虽然分页符似乎有效，但在此元素上方的第二页顶部添加了一个空白<h3>，我们不确定其来源...：

. . .

当我们按照此处的说明强制打印预览模式时，浏览器中的标题上方/上表下方没有显示这样的空白。

. . . 请注意，在> 元素margin-top: 60px上方的空 div 在打印时隐藏（通过添加到打印的类，删除它并不能解决分页符顶部的空白问题。还有什么可能导致这个空白问题？打印或保存为 PDF 时，此页面的外观完全混乱。<h3hide-printdisplay: nonedivdiv

编辑：当我们删除带有 class= 的元素时controller-navbar-container（顶部的红色条带有团队名称和徽标），分页问题已得到修复。所以也许这就是问题的根源。但是，我们不知道为什么这会导致/修复分页问题。

Answer 1

只需删除“hide-print row” div 并在“row”上的 elemenet（“hide-print row”）下添加 margin-top:40px。

Answer 2

使用媒体打印隐藏添加空间的元素，即hide-print类。

@media print{
   .hide-print{
       display:none;
   }
}