html - 更改打印的 CSS 边距

Question

我们有一个带有 page-wrapper id 的元素。我已经测试过，更改此元素的边距确实会删除实际页面上的边距:

@media (min-width: 768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 220px;
    }
}

我的目标是保留标准页面的边距，但在打印时将其删除，所以我尝试了这个:

@media print
{
    #page-wrapper 
    {
        margin: 0px !important;
        /*display: none !important;*/
    }
}

那里的 display:none 评论只是为了表明它确实隐藏了该元素以进行打印，这是我测试的一部分。但是，边距不会像它应该的那样改变。

我不知道我可能做错了什么，所以我希望有人知道。我们在页面上没有任何其他 @media print 样式，但确实有其他 @media min-width 样式，但据我所知 #page -wrapper 应该覆盖它们以进行打印。

有什么想法吗？

编辑:设置 background-color:red; 似乎也不起作用，只能使用 display: none 隐藏元素。

编辑 2:我将 @media print 绝对设置在样式表的最后，这并不重要，因为它是唯一的打印样式并使用 !important，但是仍然值得一提的是要检查的另一件事。

编辑 3:检查元素时，应用的唯一边距样式是第一个代码片段中显示的样式。 @media print 样式在检查元素时根本不显示。

Answer 1

当我需要处理类似的事情时，我首先创建了页面部分的 PDF，然后我可以根据需要打印它，也可以通过电子邮件发送。要调整 PDF 的页边距，您可以使用 @page 选择器。所以，我的嵌入式 CSS 将是:

@page{margin:120px 50px 80px 50px;}

它可能会或可能不会工作，因为我没有尝试直接从页面打印，但这可能会提供另一条通往相同最终目标的途径。