wordpress - CSS @page 不适用

Question

我在需要打印的页面上有这些巨大的文本 block ，我想添加顶部和底部边距，这样文本就不会太靠近打印页面的边缘。由于这些文本 block 不能用标签分解，因为它们是由 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 完成的，正如您已经写过的那样。但除此之外，您还需要在该媒体查询中使用一个选择器。因此，如果这些文本 block 具有例如类 .my_class，则 CSS 将为

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

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

---

评论后添加:

您是否尝试过合并 @media print 和@page？像这样(我通常那样使用它并且它对我有用):

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