How to make an HTML Page in A4 Paper Size ?

Last Updated : 11 Jan, 2025

Here are the methods to create an HTML page in A4 paper size:

1. Using the @page Rule

The @page rule allows you to specify the size and margins of the page when printing.

HTML

<html>
<head>
    <style>
        @page {
            size: A4;
            margin: 20mm;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .content {
            width: 100%;
            padding: 20mm;
            box-sizing: border-box;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1, p {
            margin: 0 0 10px;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Document Title</h1>
        <p>This is a sample paragraph for the A4-sized document. It demonstrates how content will 
          appear within the defined page layout.</p>
        <p>Additional content can be added here to fill the page and showcase the layout.</p>
    </div>
</body>
</html>

In this Example:

The @page rule sets the page size to A4 and defines a 20mm margin on all sides.
The .content class applies padding and ensures the content fits within the printable area, considering the margins.
A light background color and border are added to visually represent the page boundaries.

2. Using Specific Dimensions

You can define the exact dimensions of an A4 page using width and height properties.

HTML

<html>
<head>
    <style>
        .a4-page {
            width: 210mm;
            height: 297mm;
            margin: 20px auto;
            padding: 20mm;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            background-color: #ffffff;
            border: 1px solid #ddd;
        }
        body {
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Times New Roman', serif;
        }
        h1, p {
            margin: 0 0 10px;
        }
    </style>
</head>
<body>
    <div class="a4-page">
        <h1>Sample Document</h1>
        <p>This is a sample paragraph demonstrating the appearance of content within 
          an A4-sized page layout.</p>
        <p>Additional text can be included to further illustrate the layout and styling.</p>
    </div>
</body>
</html>

In this Example:

The .a4-page class sets the width and height to 210mm and 297mm, respectively, matching A4 dimensions.
A box shadow and border are added to create a distinct page-like appearance against the background.
The body is styled to center the .a4-page div both vertically and horizontally within the viewport.

3. Using a CSS Framework

Frameworks like Paper.css provide predefined classes for standard paper sizes, simplifying the process.

HTML

<html >
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
    <style>
        @page { size: A4 }
        .sheet {
            padding: 20mm;
            background-color: #fafafa;
        }
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Georgia', serif;
        }
        h1, p {
            margin: 0 0 10px;
        }
    </style>
</head>
<body class="A4">
    <section class="sheet">
        <h1>Paper.css Document</h1>
        <p>This document utilizes Paper.css to format the page to A4 size, providing
          a clean and printable layout.</p>
        <p>Content can be styled and structured as needed within this framework.</p>
    </section>
</body>
</html>

In this Example:

The linked stylesheet from Paper.css provides classes like .A4 and .sheet for A4-sized documents.
The @page rule ensures the printed page uses A4 dimensions.
The .sheet class includes padding to position content appropriately within the page.

How To Change Image Size In HTML?

djnanasatkx0l

Improve

Article Tags :

How to make an HTML Page in A4 Paper Size ?

1. Using the @page Rule

2. Using Specific Dimensions

3. Using a CSS Framework

Similar Reads

Thank You!

What kind of Experience do you want to share?