Sometimes, we want to disable browser print options (headers, footers, margins) from page with CSS

In this article, we’ll look at how to disable browser print options (headers, footers, margins) from page with CSS.

How to disable browser print options (headers, footers, margins) from page with CSS?

To disable browser print options (headers, footers, margins) from page with CSS, we can set print styles with the @page directive.

For instance, we write

@page {
  size: auto;
  margin: 0mm;
}

html {
  background-color: #ffffff;
  margin: 0px;
}

body {
  border: solid 1px blue;
  margin: 10mm;
}

to set the page size to auto and set margin to 0mm when the page is printed with

@page {
  size: auto;
  margin: 0mm;
}

Then we set styles for the html and body element that applies everywhere below that.

Conclusion

To disable browser print options (headers, footers, margins) from page with CSS, we can set print styles with the @page directive.