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
What is a page box in CSS?
A page box in CSS is a rectangular area that defines the printable region of a page when creating print stylesheets. It consists of the page area (where content appears) and the margin area around it. Page boxes are defined using the @page rule and allow you to control page dimensions, orientation, margins, and printing marks.
Syntax
@page {
size: width height;
margin: value;
marks: crop | cross | none;
}
Page Box Properties
| Property | Description |
|---|---|
size |
Sets the page box dimensions and orientation |
margin |
Creates space between page box edge and content area |
marks |
Adds crop and registration marks for printing |
Example: Basic Page Box Setup
The following example creates a page box with 8.5 × 11 inch dimensions and 2cm margins on all sides −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 8.5in 11in;
margin: 2cm;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.content {
padding: 20px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="content">
<h1>Print Document</h1>
<p>This content will be printed within the defined page box with 2cm margins.</p>
</div>
</body>
</html>
When printed, the page will have 8.5 × 11 inch dimensions with 2cm margins on all sides. The content area will be smaller than the total page size due to the margins.
Example: Custom Margins and Print Marks
You can set individual margins and add printing marks for professional printing −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: A4;
margin-top: 3cm;
margin-bottom: 2cm;
margin-left: 2.5cm;
margin-right: 2.5cm;
marks: crop cross;
}
.document {
font-size: 12pt;
color: #333;
}
</style>
</head>
<body>
<div class="document">
<h2>Professional Document</h2>
<p>This page uses A4 size with custom margins and printing marks for professional output.</p>
</div>
</body>
</html>
The printed page will use A4 dimensions with different margins (3cm top, 2cm bottom, 2.5cm left/right) and include both crop marks and registration marks for professional printing.
Conclusion
Page boxes provide precise control over print layouts by defining page dimensions, margins, and printing marks. They are essential for creating professional print stylesheets and ensuring consistent output across different printers and paper sizes.
262 Views
