How to disable browser print options (headers, footers, margins) in a page using CSS
How to Disable Browser Print Options (Header, Footer, Margins) in CSS
We can control the header, footer, and margins of the print preview page with the help of CSS alone, and even achieve the ideal layout and orientation of the page media. We will use the @page directive to achieve our results.
When previewing a print page in a browser, we will see some additional page information, such as the page title, the date and time the page was previewed, and the page number in the preview, all of which are present in the page header and footer. We can also see some additional margins applied to the page preview media.
Syntax
@media print {
@page {
/* Desired CSS */
}
}
Explanation
In this method, we will use the @page at-rule (or directive) within the @media print rule. This is provided by CSS and allows us to apply formatting to page media, including the page visible on the screen, paper, etc.
With the help of the @page directive, we can control the layout, design, margins, orientation, and even the design of specific pages of a printed page. This directive is widely used for designing discrete (paged) media.
Paged media differs from regular continuous media (such as websites) in that overflowing content is split into separate pages. We can still control the layout of the page using the @page directive’s pseudo-classes.
Example 1
In this example, we will remove the header, footer, and any extra whitespace visible in paged media by setting margins to “0” in the @paged directive.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@page {
margin: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariaturquo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam Minimalist omnis
</p>
</body>
</html>
Press command+p (on a Mac) or control+p (on Windows and Linux) to view the print preview screen.
Example 2
In this example, we will remove the browser’s print option from paged media, but will add margins to the body element in the paged media screen.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariaturquo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
Press command + p (on Mac) or ctrl + p (on Windows, Linux) to see the print preview screen.
Summary
In this article, we learned about the @paged CSS directive and how it can be used to remove/disable a browser’s print option from the print preview using only CSS.