CSS size

The CSS size property is used in paged media to specify the size of the page.

The size property is used as a descriptor in the @page at-rule to specify the size of the page when the document's being displayed within paged media.

Paged media refers to when the document is being rendered onto pages as opposed to continuous media. Paged media could include paper, transparencies, and pages that are displayed onto a screen.

You can use the size property to specify the exact dimensions (e.g. 11in 8.5in) or you can choose from a specific page size (e.g. A4). You can also specify the orientation (i.e. portrait or landscape). Furthermore, you can combine these (e.g. A4 landscape).

Syntax

These values are explained below.

Possible Values

auto
Specifies that the page box will be set to a size and orientation chosen by the user agent. User agents will typically choose a page box size and orientation to match the target media sheet.
landscape
Specifies that the page's content be printed in landscape orientation. The longer sides of the page box are horizontal.
portrait
Specifies that the page's content be printed in portrait orientation. The shorter sides of the page box are horizontal.
length
The page box will be set to the given absolute dimension(s). If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). If two length values are specified, the first establishes the page box width, and the second the page box height. Values in units of em and ex refer to the page context's font. Negative lengths are illegal.
page-size

The CSS3 draft specification allows for specific page sizes to be specified. These can be specified by using their media names, as follows:

A5
Equivalent to the size of ISO A5 media: 148mm wide and 210 mm high.
A4
Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm high.
A3
Equivalent to the size of ISO A3 media: 297mm wide and 420mm high.
B5
Equivalent to the size of ISO B5 media: 176mm wide by 250mm high.
B4
Equivalent to the size of ISO B4 media: 250mm wide by 353mm high.
letter
Equivalent to the size of North American letter media: 8.5 inches wide and 11 inches high
legal
Equivalent to the size of North American legal: 8.5 inches wide by 14 inches high.
ledger
Equivalent to the size of North American ledger: 11 inches wide by 17 inches high.

Page size names can be combined with an orientation (portrait or landscape). For example, size: A4 landscape; to indicate both size and orientation.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
auto
Applies To
Paged context (for example, printed documents, "Print Preview" screens, etc)
Inherited?
N/A
Media
Paged

Example Code

Official Specifications

The size property was first introduced in CSS2, but it was dropped in CSS2.1. It was subsequently reintroduced in CSS3, where it is used as a descriptor for the @page at-rule.