@page CSS

@page is a CSS at-rule that allows you to configure the page settings for a printed document. It is used to define different types of page orientations, margins, page breaks, and headers/footers for printed pages.

Syntax

@page {
  margin: 1cm;
  size: A4 portrait;
  margin-top: 50px;
  margin-bottom: 100px;
  @top-left {
    content: "Header text";
  }
}

• margin: sets the margin size for all sides of the page.
• size: sets the size of the page. The available options are auto, A4, letter, landscape, and portrait.
• margin-top and margin-bottom: sets the top and bottom margin size respectively.
• @top-left, @top-right, @bottom-left, @bottom-right: defines the content and styling for the header and footer.

Example

@media print {
  @page {
    size: A4;
    margin: 2cm;
  }

  h1 {
    page-break-after: always;
  }

  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: gray;
    color: white;
    text-align: center;
    line-height: 2cm;
  }

  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: gray;
    color: white;
    text-align: center;
    line-height: 2cm;
  }
}

In this example, we have defined the page settings for a printed document using @page. We have set the page size to A4 and the margin to 2cm. We have also defined a header and a footer using position: fixed, which will be displayed on every page of the printed document.

Conclusion

@page is a powerful CSS at-rule that allows you to configure the page settings for a printed document. It is an important tool for creating high-quality printed documents. Use it wisely and effectively to enhance the print experience.