Skip to content
Related Articles

Related Articles

CSS | @page rule

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Jan, 2022

The CSS @page rule defines the dimension of the page which is gonna be print. There are few important things should be under control when you want to print a web page those are listed below:  

  • The page size, orientation, margins, border, and padding.
  • Page breaks.
  • Headers and footers.
  • Page counters.
  • Orphans.

All the above things are controllable when you follow the @page rule.

@page [:left | :right | :first] {
    /* print-specific rules */

Page Descriptor: There are three Descriptor in @page rule those are: 

  • size: Specify the size of page box’s containing block. 


@page {
      size: A4;

  • marks: It helps to trim the page that you want to print. 


@page {
      marks: crop cross;

  • bleed: It extend the bleed area of the box 


@page {
      bleed: 7pt;



<!DOCTYPE html>
<html lang="en">
<title>CSS @page rule</title>
<style type="text/css">
    /* default for all pages */
    @page {
        margin: 2in;   
    /* margin on left page */
    @page :left {
        margin: 1in;   
    /* margin on right page */
    @page :right {
        margin: 3in;   
    /* top margin on first page */
    @page :first {
        margin-top: 5in;   
    <h2>CSS Page At-rule</h2>
     If you open output in a new window and print the page
     the margin around the text content appears differently
     than it appears on the screen.

Output: When you choose to print the output screen of the above code. 

Supported Browsers: The browsers supported by CSS @page rule are listed below: 

  • Google Chrome 2.0
  • Internet Explorer 8.0
  • Safari 5.1
  • Opera 6.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!