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

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.

• CSS Paged Media Module Level 3 (W3C Working Draft 14 March 2013)
• CSS Level 2 (W3C Recommendation 12-May-1998)