css布局问题。页边距和标准纸张尺寸答案

【问题标题】：css layout problem. margin and standard paper sizecss布局问题。页边距和标准纸张尺寸
【发布时间】：2010-10-20 23:40:25
【问题描述】：

我正在尝试找出最适合阅读的页边距，并且我认为最好使用标准纸张尺寸和页边距。我查了一下，好像8.5是标准的。我查找了如何做基本 CSS 并遇到了问题

左边距：1.5in；右边距：8.0 英寸；

除了左侧从左侧 1.5 处开始，右侧从左侧 8 英寸处开始。事实证明，右边是 8 英寸，破坏了我的页面。无论用户浏览器的分辨率如何，如何设置文本宽度为 7 英寸？

【问题讨论】：

标签： css

【解决方案1】：

您可以将主体宽度设置为 7 英寸。但是浏览器会自动为您布置文本以适合纸张。所以我会将左边距和右边距都设置为 1.5 英寸。您可以使用单独的 CSS 文件进行打印。

【讨论】：

【解决方案2】：

看看the CSS Box Model 和Media Type rules。 @page rule（用于分页媒体）可能也很有趣。

如前所述，您应该使用width 属性来定义块级元素的宽度。然后，您可以使用 padding 和 margin 填充文本并在其容器周围放置边距。

这样的东西可以让你指定打印的文档样式：

@media print {
  p {
    font-family: times,serif;
    font-size: 12px
    margin: 1cm 2cm;
    page-break-inside: avoid;
    widows: 2;
    orphans: 2;
  }
}

我建议让打印机软件根据您指定的边距和用于打印的页面自动确定文本的尺寸。这样，用户可以更轻松地在他们想要的任何尺寸的纸张上打印。 Here are some print-specific CSS properties 你可能想用它来格式化打印的文档。

而且我相信衬线字体在印刷品上更容易阅读（或者人们这么说），所以这也值得考虑。

【讨论】：

【解决方案3】：

您正在向后看：margin-right 是从视口（或纸）右侧开始的宽度。所以对于一张 8.5 英寸的纸，四面都有 1 英寸的边距，你会想要：

body{
      margin-left: 1in;
      margin-right: 1in;
      width: 6.5in;
}

【讨论】：