CSS @page 不适用

Question

我在需要打印的页面上有这些巨大的文本块，我想添加顶部和底部边距，这样文本就不会太靠近打印页面的边缘。由于这些文本块不能用标签分解，因为它们是由 rss 提要爬虫聚合的，所以我尝试在 css 中使用@page，但到目前为止没有成功。我正在使用 Chrome 和打印机预览。如果重要的话，我正在使用 wordpress。

这是 PDF 格式的图像。 Printed text block

我尝试将其放入@media screen 或@media print，添加!important，我已经在网上搜索了一个小时......

我在我的 CSS 文件中添加了这个 CSS（并尝试了其他变体），但它不适用。所有其他@media 打印样式都可以正常工作。

@page { 
  margin-top: 2cm;
  }

任何指针都将不胜感激，因此我可以在打印页面的顶部和底部添加边距。

Answer 1

正如您已经写过的，通常使用@media print 来处理打印的元素。但此外，您需要在该媒体查询中使用选择器。因此，如果这些文本块具有例如 .my_class 类，则 CSS 将是

@media print {
  .my_class {
    margin-top: 2cm;
  }
}

如果文本块没有任何类，请考虑在 HTML 或生成它们的脚本中为它们应用一个类。

---

评论后补充：

您是否尝试合并 @media print 和 @page？像这样（我通常这样使用它，它对我有用）：

@media print {
    @page  { 
        margin-top: 2cm;
    }
}