HTML打印时如何为每页单独设置padding-top与padding-bottom？

问题 #

使用HTML和CSS制作书籍时，打印模式下为body设置的padding-top仅在第一页生效，padding-bottom仅在最后一页生效，无法让每页文字上下都显示足够的背景色（当前每页文字上下背景色过窄）。现有打印相关CSS代码如下：

@media print {
    @page {
    size: A4;
    margin-top: 30mm;
    margin-bottom: 27mm;
    }
    @page :left {
    margin-left: 14mm;
    margin-right: 14mm;
    }
    @page :right {
    margin-left: 14mm;
    margin-right: 14mm;
    }
    html, body {
    zoom: 1;
    padding: 0.6em 0; /* 仅对第一页顶/最后一页底生效 */
    }
}

解决方案 #

核心思路是使用独立的内容容器替代body设置padding，利用CSS属性让容器的样式在分页时被克隆到每一页：

1. 添加内容容器
   在HTML中，将所有书籍内容包裹到一个容器内，例如：

   <div class="book-content">
     <!-- 所有书籍内容（章节、段落等） -->
   </div>
   

2. 调整打印样式
   修改CSS的打印媒体查询部分，移除html, body的padding，改为给内容容器设置padding并启用分页克隆：

   @media print {
       @page {
           size: A4;
           /* 保留页面边距，确保容器padding有显示空间 */
           margin-top: 30mm;
           margin-bottom: 27mm;
       }
       @page :left {
           margin-left: 14mm;
           margin-right: 14mm;
       }
       @page :right {
           margin-left: 14mm;
           margin-right: 14mm;
       }
       html, body {
           zoom: 1;
           padding: 0; /* 移除body的padding */
       }
       /* 给内容容器设置上下padding，并开启分页克隆 */
       .book-content {
           padding: 0.6em 0;
           box-decoration-break: clone;
           -webkit-box-decoration-break: clone; /* 兼容webkit内核浏览器 */
           width: 100%;
           min-height: 100vh; /* 确保容器高度适配页面 */
       }
   }
   

3. 补充说明

   • box-decoration-break: clone会让容器的背景、边框、padding等样式在分页时，分别应用到每一段分页内容上，而不是仅在首尾生效。
   • 确保body的背景色#eaeaea可以覆盖到容器的padding区域，或者直接给.book-content设置相同的背景色。

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