Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page’s header, footer, and margin just with the help of CSS, and even achieve the desired layout and orientation of the paged media. We will be using @page directive to achieve our results.
While previewing a print page in the browser, we see some extra page information, like page title, page preview date and time, and the page number in the preview, all present in the page’s header and footer. We also see some extra margin applied to the page preview media.
Syntax
@media print {
@page {
/* Desired CSS */
}
}
Explanation
In this approach, we will use a @page at-rule (or directive), inside the @media print rule, which is provided by CSS that allows us to apply formatting on the paged media, which includes pages visible on screens, papers, etc.
With the help of @page directive, we can control the printed page’s layout, design, margin, orientation, and even the design of the particular pages. The directive is widely used in designing discrete (paged) media.
Paged media differs from the usual continuous media (like websites) in the aspect that in the paged media, if the content overflows it gets divided into separate pages. We can still control the layouts of the pages with the help of the @page directive’s pseudo-classes.
Example 1
In this example, we will remove the header, footer, and extra margin visible in the paged media by setting the margin to “0” inside 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 pariatur quo? 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 (in mac) or ctrl + p (in windows, Linux) to see the print preview screen
Example 2
In this example, we will remove the browser print options from the paged media but will add the margin 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 pariatur quo? 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 (in mac) or ctrl + p (in windows, Linux) to see the print preview screen
Conclusion
In this article, we learned about @paged CSS directive, and how we can use this directive to allow us to remove/disable the browser print options from the print preview using just CSS.
3K+ Views
