Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 with CSS using the @page directive. This allows us to customize the layout and remove browser-generated print options like headers, footers, and default margins.
When previewing a print page in the browser, you typically see extra information like the page title, date and time, and page numbers in the header and footer. There are also default margins applied to the page. We can disable these using CSS print styles.
Syntax
@media print {
@page {
margin: 0;
}
}
How It Works
The @page at-rule inside @media print allows us to apply formatting specifically to printed pages. The @page directive controls the printed page's layout, margins, and orientation.
Setting margin: 0 within the @page rule removes the default browser margins and eliminates the space reserved for headers and footers, effectively disabling these browser print options.
Example 1: Remove All Browser Print Options
This example removes headers, footers, and margins by setting the page margin to zero
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Disable Browser Print Options</title>
<style>
@page {
margin: 0;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.content {
background-color: #f0f8ff;
padding: 15px;
border: 2px solid #007acc;
}
</style>
</head>
<body>
<div class="content">
<h2>Sample Content</h2>
<p>This page will print without browser headers, footers, or default margins when you use Ctrl+P (Windows/Linux) or Cmd+P (Mac) to preview.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. The @page margin:0 rule removes all browser-generated print elements.</p>
</div>
</body>
</html>
Use Ctrl+P or Cmd+P to see the print preview. The page will display without browser headers, footers, or default margins.
Example 2: Custom Body Margins for Print
This example removes browser print options but adds custom margins to the body element for better print layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Print Margins</title>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
.highlight {
background-color: #fffacd !important;
}
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.highlight {
background-color: #e6f3ff;
padding: 10px;
border-left: 4px solid #007acc;
}
</style>
</head>
<body>
<h2>Print-Optimized Content</h2>
<div class="highlight">
<p>This content demonstrates custom print styling. The page removes browser print options but applies a 2rem margin to the body for better readability when printed.</p>
</div>
<p>Regular content that will also benefit from the custom print margins while maintaining the removal of browser headers and footers.</p>
</body>
</html>
Use Ctrl+P or Cmd+P to see the print preview. Browser headers/footers are removed, but the content has a 2rem margin for better print layout.
Key Points
-
@page { margin: 0; }removes browser headers, footers, and default margins - Use
@media printto apply styles only when printing - You can add custom margins to
bodyor other elements for better print layout - This method works across all modern browsers
Conclusion
The @page directive with margin: 0 effectively disables browser print options like headers, footers, and default margins. This gives you full control over the printed page layout using CSS.
4K+ Views
