Sometimes, we want to disable the headers, footers, and margins when a web page is being printed.
In this article, we’ll look at ways to disable the headers, footers, and margins on the page when it’s being printed.
Disable Headers, Footers, and Margins with CSS
We can disable headers, footers, and margins with CSS.
For instance, we can write:
<!doctype html>
<html>
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page {
size: auto;
margin: 0mm;
}
html {
background-color: #FFFFFF;
margin: 0px;
}
body {
border: solid 1px blue;
margin: 10mm 15mm 10mm 15mm;
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
We set some styles for the page when being printed with the @page CSS directive.
We set the size to auto and set margin to 0mm to remove the margins.
Then we set the html styles to a white background color and no margins.
And in the body, we set the border and margin styles.
We set the media attribute to print to make sure the styles are only applied when the page is being printed.
Conclusion
We can disable various parts of the page when they’re printed with printing specific CSS styles.
