I would like to print an HTML in Chrome. It is A4 (210×297 mm) sized. In the code below I set the paper size to 210×297 and the margin (padding) to 20 mm. To present a minimal reproducible example, I place a single paragraph on the page:
<html>
<head>
<style>
@page {
size: A4 portrait;
}
body {
position: fixed;
top: 0mm;
left: 0mm;
width: 210mm;
height: 297mm;
margin: 0mm 0mm 0mm 0mm;
padding: 20mm 20mm 20mm 20mm;
border: solid green 1px;
outline: solid yellow 1px;
}
p {
position: static;
width: 170mm; /* = 210 - 20 - 20 */
height: 257mm; /* = 297 - 20 - 20 */
margin: 0mm;
padding: 0mm;
border: solid red 1px;
outline: solid blue 1px;
background-color: #ddffdd;
}
</style>
</head>
<body class="A4">
<p>Hello!</p>
</body>
</html>
My expectation is that this will fill the whole page. However, Chrome shows the following print preview:
I think the yellow-green border-outline should be at the top of the page, not a few millimetres lower.