设置固定尺寸body后，如何消除打印HTML时的右侧边距？

首先得明确，你当前的代码已经把body设为A4的精确像素尺寸（595px宽、842px高，对应72DPI的标准A4规格），但打印时右侧还有边距，通常是浏览器打印默认设置、元素布局溢出，或者缩放规则导致的。下面是具体的解决办法：

1. 强化@page规则，明确打印页面属性 #

浏览器默认可能会忽略简单的margin:0，需要在@page里同时指定页面尺寸和边距，强制浏览器识别这是无额外边距的A4页面：

@page {
  size: A4; /* 明确指定为标准A4尺寸 */
  margin: 0; /* 彻底消除页面级边距 */
}

2. 确保内部元素不超出A4宽度 #

你的代码里用了浮动元素，如果元素总宽度超过body的595px，就会导致溢出，打印时自动出现右侧边距。可以给浮动元素设置精确宽度，或者用更可控的布局方式：

• 给浮动元素设置自适应宽度，避免溢出：

<section>
  <div style="float:left;height:60px; width: calc(50% - 2px);">x</div>
  <div style="float:right;height:60px; width: calc(50% - 2px);">y</div>
</section>

• 或者用flex布局替代浮动，更稳妥：

section {
  display: flex;
  justify-content: space-between;
}

3. 关闭浏览器打印的缩放适配 #

很多浏览器默认开启“适应页面”或“缩放以适应”的打印设置，会自动调整页面尺寸导致边距出现。打印时一定要手动选择**“实际尺寸”或“100%缩放”**，确保页面按原始尺寸输出。

4. 用打印媒体查询锁定样式 #

专门针对打印场景设置样式，用!important覆盖浏览器默认规则，确保你的设置生效：

@media print {
  body, html {
    width: 595px !important;
    height: 842px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden; /* 强制隐藏溢出内容 */
  }
}

完整修改后的代码示例 #

<html>
<head>
<style type="text/css">
  @page {
    size: A4;
    margin: 0;
  }
  body, html {
    margin:0;
    padding:0;
  }
  body {
    height: 842px;
    width: 595px;
  }
  section {
    clear: both;
  }
  @media print {
    body, html {
      width: 595px !important;
      height: 842px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
    }
  }
</style>
</head>
<body>
<section>
  <div style="float:left;height:60px; width: calc(50% - 2px);">x</div>
  <div style="float:right;height:60px; width: calc(50% - 2px);">y</div>
</section>
<section>
  test
</section>
</body>
</html>

总结一下，核心就是：明确@page的尺寸与边距、确保内部元素不溢出A4范围、关闭打印缩放、用打印媒体查询强化样式，这样就能彻底消除打印时的右侧边距了。

内容的提问来源于stack exchange，提问作者RedDragon