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

Page setup

The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.

Layout

Overview

The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.

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

Powered by web-features