分页符上的 CSS 边距答案

【问题标题】：Margin with CSS on page breaks分页符上的 CSS 边距
【发布时间】：2020-04-17 12:08:32
【问题描述】：

我正在开发一个小型个人网站，该网站也需要可打印。网站本身的结构很简单：body 用作背景，有一个具有固定宽度（以及一些样式、填充等）的容器子容器，在这个容器中，我有几个部分（@ 987654327@)。在打印过程中，我宁愿不分解这些部分，除非有必要（因此，.section 有一个样式添加 page-break-inside: avoid;）。显然，如果这样的部分不能放入单个页面中，它将在内部有一个分页符，否则会将元素滑动到下一页。

这部分工作正常，但是在分页后，我仍然希望下一个元素与页面顶部正确对齐，并使用其默认边距。但这并没有发生。每当我准备打印时，被推到下一页的 .section 元素顶部的边距消失 - 即使它不应该消失，除非我对分页符和边距的理解不正确（可能是这种情况）。

我准备了一个小例子：

body {
  background: none repeat scroll 0 0 #eee;
  margin: 0;
  color: #4a4a4a;
  display: block;
}

.container {
  margin: 16px auto;
  padding: 2.5% 0;
  max-width: 200mm;
  line-height: 1.1;
  border-radius: 16px;
  background-color: #fff;
  color: #fff;
}

.container>.section {
  padding: 3%;
  margin: 5% 2.5%;
  min-height: 500px;
  border-radius: 16px;
  box-shadow: 0px 4px 8px 0px #AA888888;
}

.container>.section:first-of-type {
  margin-top: 0%;
}

.container>.section:last-of-type {
  margin-bottom: 0%;
}

.section-red {
  background-color: #f44336;
  background-repeat: repeat;
}

.section-green {
  background-color: #8bc34a;
  background-repeat: repeat;
}

.section-blue {
  background-color: #03a9f4;
  background-repeat: repeat;
}

.section-yellow {
  background-color: #c0ca33;
  background-repeat: repeat;
}

.section-orange {
  background-color: #ffb300;
  background-repeat: repeat;
}

.section-pink {
  background-color: #e91e63;
  background-repeat: repeat;
}

.section-purple {
  background-color: #9c27b0;
  background-repeat: repeat;
}

.font-size-large {
  font-size: 14px !important;
}

.font-size-xlarge {
  font-size: 18px !important;
}

@media print {

    body {
        width: 210mm;
    }

    .container {
        max-width: 90%;
        min-width: 0;
        margin: 5mm auto 200mm;
    }

    .container > .section {
        page-break-inside: avoid;
        margin-top: 8px;
    }

    .container > .section > section {
        page-break-inside: avoid;
    }
}

<html>

  <head>

  </head>

  <body>

    <div class="container font-size-large">
      <div class="section section-red">
      </div>
      <div class="section section-blue">
      </div>
      <div class="section section-green">
      </div>
      <div class="section section-purple">
      </div>
      <div class="section section-orange">
      </div>
    </div>

  </body>

</html>

不过，您可能需要将其复制到本地 HTML 和 CSS 文件才能正确打印。

编辑：

问题的快速视觉示例。

常规页面，无中断（预期布局）：

打印时布局损坏：

【问题讨论】：

通过计算机和浏览器从网络打印可能很难确定。您是否尝试过将填充或边距应用于正文元素而不是部分？如果有帮助，还有一个分页前样式。
由于纸张尺寸不同，我宁愿在内容中没有固定的断点，而是在打印过程中动态分配。我也看不出在body 上添加边距如何解决孩子的定位问题（如果您检查示例代码，您会发现.container 就像一个实际的视觉容器，与灰色背景形成对比。白色背景，打破它会搞砸布局）。
将小提琴代码复制到问题中的 sn-p 中（按 CTRL-M），同时编辑以添加或单击该图标
谢谢，将其添加为内联示例，但此处的打印仍然损坏 - 要观察我的效果，您仍然需要将 sn-p 复制到本地 HTML 文件并从那里打印出来。
我遇到了另一篇文章，其中讨论了如果您需要缩放前一部分以填充页面，则缩放 div 以填充纸张。 stackoverflow.com/questions/36690580/…。这可能有助于在新页面上认为它已经具有上边距的部分。我仍然认为您可以尝试使用 body margins 看看这是否有助于获得您需要的东西。

标签： html css margin page-break

【解决方案1】：

我从相关上下文 here 中找到了一个解决方案，它也适用于这种情况。 box-decoration-break:clone 用于在发生行、列或分页时“复制”css 属性。后者是这里的情况，因为边距和/或填充是复制的属性之一。（除了 iexplore 之外，它得到了广泛的支持。）

我所要做的就是将该属性添加到我的 print-css 中，以在每个页面上为主元素（即您的 .container）提供一个固定的标题和一个重复的填充：

@media print {

    header {
        display: flex;
        flex-flow: wrap;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    main{
        padding: 4cm 2cm 2cm 2cm;
        box-decoration-break: clone;
    }
...
}
...

【讨论】：