Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

@page

Browser support full matrix
IE7 FF2 Saf3 Op9.2+
None None None Full
Spec
Version
CSS2

Example

This example sets default page margins:

@page {
  margin: 1in 1.5in;
}

Description

You can use the @page at-rule to specify margin values for the page box in style sheets for paged media such as the print media type.

In its simplest form, the at-rule is followed by a block of margin declarations:

@page {
  margin: 1in 1.5in;
}

You can specify different margins for all left-hand pages, all right-hand pages, or for the first page, by inserting a page selector between the at-rule and the block. The page selector is one of three pseudo-classes. Let’s look at an example that shows how these pseudo-classes can be used:

@page {
  margin: 2.5cm; /* default for all pages */
}

@page :left {
  margin-left: 5cm; /* left pages only */
}

@page :right {
  margin-right: 5cm; /* right pages only */
}

@page :first {
  margin-top: 8cm; /* extra top margin on the first page */
}

Compatibility

IE5.5None
6.0None
7.0None
Firefox1.0None
1.5None
2.0None
Safari1.3None
2.0None
3.0None
Opera9.2Full
9.5Full

This at-rule is currently only supported by Opera 9.2 and later versions.

User-contributed notes

ID:
#2
Date:
Tue, 22 Apr 2008 12:25:23 GMT
Contributed by:
AutisticCuckoo
Status:
This note has not yet been confirmed for accuracy and relevance.

@leeschen: No, those margins are *in addition to* the user-specified margins defined in the browser. Overriding the user settings would be very bad.

ID:
#1
Date:
Mon, 14 Jan 2008 07:37:08 GMT
Contributed by:
leeschen
Status:
This note has not yet been confirmed for accuracy and relevance.

Well, yes it works in Opera 9.25, but Opera also seems to add in an extra measure of margins regardless of what is set in the browser print options and, if you don't have auto-size turned on, it will whack off the right edge rather than re-flow the text.

Trying a .5"in all around results in .5" top/bottom and 1.25" left/right on the page.

A top/bottom of .5" and alternating page of 1"/.5" inside/outside gives 1.75" inside and 1.25" outside.

Maybe I misunderstand but should not the correct function be to override the browser assigned printer margins?

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters