CSS 边距设置以及旋转问题

Question

我需要在 A4 sheet 中打印文档，这样第一部分需要在上半部分打印（即 A5 sheet 测量值）并且也是 90 度下一个 A5 sheet 中的旋转和第二部分以正常方式进行。我可以通过随机微调边距来做到这一点。（这在不同的设备上有问题，Android phones 和选项卡，工作正常，但在其他 phone 中不起作用）我相信会有一个正确的方法来做到这一点。这是我 html code.Appreciate 你的帮助。

<!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>

Answer 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>

CSS 边距设置以及旋转问题

Issue with CSS Margin setting along with rotate

html

css

css-transforms