html - 打印视图中的边距扩大

Question

我正在为我的项目制作打印视图，但是当我更改纸张大小时，有时容器中的边距会由于某种原因而扩大，并且会扩大我的容器的高度。有没有什么办法解决这一问题？

<div class="field-padding">
    <div class="label">{{label}}</div>
    <div class="text-field">{{value}}</div>
</div>

这是CSS文件：

@media print {
  .field-padding {
    margin-bottom: 10px;
  }

  .label {
    margin-bottom: 5px;
  }
}

图片供参考：

编辑：附加参考。正如您在此处看到的，一个部分中的相同组件也在同一页面中，但另一个因某种原因被扩展。（打印视图）

第一节

第二节

提前致谢。

标签： htmlcssangularangular-material

Answer 1

在打印模式下最好使用 cm 或 pt，请参阅此

@media print {
  .field-padding {
    margin-bottom: 11pt;
  }

  .label {
    margin-bottom: 6cm;
  }
}