CSS：隐藏元素仍会占用打印输出的空间

Question

我正在使用css只打印页面的一部分：

    body {
 visibility:hidden;
    }
    .print {
     visibility:visible;
     background-color: white;
     margin: 0;
    } 

我要打印的元素上方的部分被正确隐藏在打印输出中，但它仍占用了空间区域。我通过制作一个长的垂直单词列表对此进行了测试。在打印输出中，在没有单词的情况下发生相同的空白区域，然后发生元素输出。仅在chrome和mozilla上会出现此问题。我还测试了浏览器的边距选项，这不是问题。

有什么想法吗？

Answer 1

您希望display:none不是visibility:hidden。后者使元素不可见，但不会将其从文档流中删除。

Answer 2

使用@media进行打印。例如：

@media print {
  * {display: none;} /*or if you want only the body*/ body {display: none;}
  .print {display: block;}
}

（只是一个粗略的例子。实际的样式表应该包括页面的所有元素而不是通配符）

然后样式表仅在打印或打印预览时使用。

Answer 3

如果我们想要display:inline-block或display:block以及隐藏的可见性。

然后我们可以使用follwing css作为解决方法。

{
    visibility:hidden
    width:0px;
    height:0px 
}

Answer 4

使用display:none;

Answer 5

请尝试使用display: none;。

Answer 6

使用display：none;因为你只想显示印刷而不是身体的一部分。

Answer 7

即使是visibility:collapse;也可以！ ：）