html - css pdf 页面 - 标题与内容重叠

Question

正如我们从图片中看到的，我的内容与标题图片重叠，这是我的代码:

    <style type="text/css" media="print">
        @page {
            /*size:landscape;*/

            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }
        }
        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
    </style>
</head>
<div class="header">
    <img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">

</div>

P.S.:请不要将此问题作为重复问题关闭，因为我已经搜索了所有与此相关的问题，但由于涉及 PDF，我的问题看起来有所不同。

Answer 1

页眉和页脚建立在页边距内。

所以解决办法就是增加页面上边距，例如:

@page {
        margin-top: 50mm; 
}