Newly available Useful when Page setup helps structure space, flow, or sizing without relying on brittle manual adjustments.

Page setup

The page CSS property is used to specify the named page, a specific type of page defined by the @page at-rule.

If there are multiple selectors that are using a named page consecutively then a forced page break using break-after may be needed.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
page
85
85
110
1
85
1
Other
css.at-rules.page

The @page at-rule is a CSS at-rule used to modify different aspects of printed pages. It targets and modifies the page's dimensions, orientation, and margins. The @page at-rule can be used to target all pages in a print-out or a subset using its various pseudo-classes.
2
12
19
18.2
18
18.2
CSS at-rule
bottom-center
Experimental

`@bottom-center` page-margin box
131
131
131
bottom-left
Experimental

`@bottom-left` page-margin box
131
131
131
bottom-left-corner
Experimental

`@bottom-left-corner` page-margin box
131
131
131
bottom-right
Experimental

`@bottom-right` page-margin box
131
131
131
bottom-right-corner
Experimental

`@bottom-right-corner` page-margin box
131
131
131
left-bottom
Experimental

`@left-bottom` page-margin box
131
131
131
left-middle
Experimental

`@left-middle` page-margin box
131
131
131
left-top
Experimental

`@left-top` page-margin box
131
131
131
right-bottom
Experimental

`@right-bottom` page-margin box
131
131
131
right-middle
Experimental

`@right-middle` page-margin box
131
131
131
right-top
Experimental

`@right-top` page-margin box
131
131
131
size

The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.
15
79
95
18.2
18
18.2
size.jis-b4

`jis-b4` page size
83
83
95
18.2
83
18.2
size.jis-b5

`jis-b5` page size
83
83
95
18.2
83
18.2
top-center
Experimental

`@top-center` page-margin box
131
131
131
top-left
Experimental

`@top-left` page-margin box
131
131
131
top-left-corner
Experimental

`@top-left-corner` page-margin box
131
131
131
top-right
Experimental

`@top-right` page-margin box
131
131
131
top-right-corner
Experimental

`@top-right-corner` page-margin box
131
131
131
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@page {
  size: A4;
  margin: 20mm;
}
@page :first {
  margin-top: 40mm;
}

Live demo

@page(a4settings)

CSS @page(A4settings) demo.

PreviewFullscreen

@page :first

CSS @page:first demo.

PreviewFullscreen

@page :left / :right

CSS @page:left /:right demo.

PreviewFullscreen

Use cases

  • Component layout

    Use Page setup to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links