浏览器打印边距，默认/无边距，占满1页A4

梦想身高1米8

已于 2023-06-05 10:57:48 修改

阅读量4.9k

点赞数 1

文章标签： css css3 前端 html

于 2022-07-04 11:37:45 首次发布

本文链接：https://blog.csdn.net/weixin_43915401/article/details/125562893

版权

长页面打印的时候，分页是通过给每页内容的外层div设置高度实现的，以达到一页内容刚好占据1页A4纸。
（至少我遇到的情况是这样）
但是，如何设置宽高以及边距，真是个讲究活。

1 设置宽高为210mm*297mm

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 210mm;
            height: 297mm;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

210*297mm是A4纸的尺寸，但是如果加上打印默认的边距，效果就有点不对劲了。
在这里插入图片描述
如果这个边距不是必要的，那么可以考虑去掉边距。

@media print { // 媒体查询，打印时样式生效，不用也可以
    @page { // 用于在打印文档时修改某些 CSS 属性
        margin: 0;
        }
    }
}

在这里插入图片描述
或者打印设置里改成无边距（不推荐这种办法，需要客户多干一个步骤，不如设置css直接）

如果一定要边距，那么设置宽高的时候，就把边距减掉。

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 190mm;
            height: 277mm;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 10mm;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

在这里插入图片描述
细看其实分页有一丝丝错位，不知道为啥。
以及，既然在css中设置了边距，就不要去调整浏览器打印边距，样式会乱。

设置宽高为`a:b`px

在无边距时，这个`a:b`=`210:297`就能达到占满a4纸的效果了

（其实就是a4纸的比例了）

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 1024px;
            height: 1448px;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 0mm;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

1024:1448差不多就是A4纸的比例了。
在这里插入图片描述

有边距时，宽高比需要调试。

<html>

<head>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 1024px;
            height: 1471px;
        }

        div:nth-of-type(1) {
            background-color: cadetblue;
        }

        div:nth-of-type(2) {
            background-color: blueviolet;
        }

        @media print {
            @page {
                margin: 20px;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>