Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Values to set page size in CSS
The CSS @page rule's size property controls the dimensions and orientation of printed pages. There are four values that can be used to set page size −
- auto − The page box will be set to the size and orientation of the target sheet.
- landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.
- portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.
- length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.
Syntax
@page {
size: value;
}
Example: Auto Page Size
In the following example, the outer edges of the page box will align with the target. The percentage value of the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm ?
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
.content {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Sample Print Page</h1>
<p>This page will use the printer's default paper size with 10% margins on all sides.</p>
</div>
</body>
</html>
When printed, the page will automatically match the target paper size with 10% margins applied to all sides.
Example: Portrait Orientation
The following example forces portrait orientation regardless of the default printer settings ?
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: portrait;
margin: 1in;
}
body {
font-family: Times, serif;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Portrait Document</h1>
<p>This document will always print in portrait orientation with 1 inch margins.</p>
</body>
</html>
The printed page will be in portrait orientation (taller than wide) with 1 inch margins on all sides.
Example: Custom Page Dimensions
You can also specify exact dimensions using length values ?
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 8.5in 11in; /* US Letter size */
margin: 0.5in;
}
.document {
font-family: Arial, sans-serif;
font-size: 12pt;
}
</style>
</head>
<body>
<div class="document">
<h1>Custom Size Document</h1>
<p>This page is set to US Letter dimensions (8.5 × 11 inches) with half-inch margins.</p>
</div>
</body>
</html>
The printed page will be exactly 8.5 × 11 inches with 0.5 inch margins, creating a precise document layout.
Conclusion
The size property in @page rules provides complete control over print layout. Use auto for default behavior, portrait or landscape for orientation control, or specific dimensions for custom page sizes.
2K+ Views
