CODEWITHSUNDEEP
htmlcssgoogle-chrome
z32a7ul
z32a7ul

Reputation: 3777

Printing A4 size HTML in Chrome - wrong height

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:

Chrome error

I think the yellow-green border-outline should be at the top of the page, not a few millimetres lower.

Upvotes: 1

Views: 1997

Answers (1)

Raheel Junaid
Raheel Junaid

Reputation: 587

Have you tried setting Margins to none in the print settings? I can see that you have it set to minimum which hinders your 20mm desired padding.

Upvotes: 1

Related Questions