CSS Margin 设置和旋转问题答案

【问题标题】：Issue with CSS Margin setting along with rotateCSS Margin 设置和旋转问题
【发布时间】：2020-11-16 21:38:36
【问题描述】：

我需要在 A4 纸上打印文档，这样第一部分需要在前半部分打印（即 A5 纸测量），并且需要旋转 90 度，第二部分在下一张 A5 纸上正常打印方法。我可以通过随机微调边距来做到这一点。（这在不同的设备、Android 手机和选项卡上存在问题，其中一些工作正常，在其他手机上不工作）我相信会有正确的方法来做到这一点。这是我的 html 代码。感谢您对此的帮助。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* 210mm X 296 mm */
      .A5 {
        height: 148mm;
        border: 2px red solid;
      }

      .rotate {
        transform: rotate(90deg);
        border: 2px magenta solid;
        margin-left: 50mm;
        margin-top: -75mm;
        min-height: 296mm;
        max-width: 148mm;
      }
    </style>
  </head>
  <div class="A5">
    <div class="rotate">
      ***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
      Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
      reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
      voluptates deleniti. Odio!***END**
    </div>
  </div>
  <div class="A5">
    ***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
    dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
    quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
    deleniti. Odio!***END**
  </div>
</html>

【问题讨论】：

检查这个：developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
@TemaniAfif，感谢您的意见。这对我来说是一个新信息。我会试试的。暂时我修复了问题 flex 和 align item 属性

标签： html css css-transforms

【解决方案1】：

这是我可以使用的解决方案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      :root {
        --page-width: 210mm;
        --page-height: 296mm;
      }

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

      .A5 {
        margin: 0px;
        border: 2px black solid;
        /* Note: height and width interchanged because of rotation */
        width: var(--page-height);
        height: var(--page-width);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .rotate {
        transform: rotate(90deg);
        height: var(--page-height);
        width: var(--page-width);
        border: 2px magenta solid;
      }

      .al {
        align-items: flex-start;
      }
    </style>
  </head>
  <div class="A5">
    <div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
  </div>
  <div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>

【讨论】：