从网站（html / css）打印绝对固定位置，打印对话框没有系统边框

Question

我在打印网站时遇到了一点问题。 我需要在 A4 格式的固定贴纸上打印： https://www.avery-zweckform.com/search?term=L6009&content_group=ALL_CONTENT_GROUPS

为了完全匹配这张 A4 纸上的贴纸，我需要一个固定的 A4 CSS 网格。

当我使用以厘米为单位的固定尺寸时，这是可行的，但是当我尝试打印此页面（Chrome 和 Firefox 相同）时，浏览器本身总是会添加一个小边框。

示例： 打印后，我的填充权为 3cm，而不是我定义的 2cm。 在左侧我有 2.5 厘米，在顶部又是 3 厘米。

因此，似乎不可能创建一个精确的表格来打印真正令人失望的内容。

有没有人有想法或同样的问题？

HTML

<page size="A4">
    <div class="inner">
      <div style="width: 100%; height: 30px; background-color: grey"></div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    </div>
</page>

CSS：

body {
  background: rgb(204, 204, 204);
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.inner {
  padding: 2cm;
}

@media print {
  body {
    margin: 0 !important;
  }
  page[size="A4"] {
    margin: 0 !important;
    box-shadow: none !important;
  }
  @page {
    size: auto;
    margin: 0mm;
  }
}

Answer 1

您可以先尝试重置所有元素的边距和填充，然后使用您的自定义值。 我不确定它是否适用于您的情况，但请在您的 css 开头尝试：

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

希望对你有用。