The 'size' Property
October 30, 2000
The size property specifies the size and orientation of the printed
page. The size of a page can be either a fixed size or scalable.
Absolute
When you want the size of a page to be absolute (a fixed size), you
specify the width and height using one of the following units:
- in (for inches)
- cm (for centimeters)
- mm (for millimeters)
Thus, if we want to specify that the page size is 8 ½ inches by 11
inches, we write:
@page { size: 8.5in 11in }
and if we wanted to specify A4 page dimensions in centimeters, we write:
@page { size: 21cm 29.7cm }
Relative
When we want the size of a page to be relative (scalable), we specify
one of three values:
- auto – used when we want the page size to be set to the size
and orientation of the target pages (the paper, for example)
- landscape – used when we want to override the target page's
orientation and make the longer sides horizontal
- portrait – used when you want to override the target page's
orientation and make the longer sides vertical
Thus, if we want to say that the page should be printed in landscape
mode, we write:
@page { size: landscape }
As mentioned previously, at the time that this book was written, none of
the major browsers supported this feature.
The Margin-Related Properties
The margin-related properties are used to set the left, right, top, and
bottom margins of the page.
| Property |
Definition |
| margin-left |
Sets the margin for the left side of the printed page. |
| margin-right |
Sets the margin for the right side of the printed page. |
| margin-top |
Sets the margin for the top of the printed page. |
| margin-bottom |
Sets the margin for the bottom of the printed page. |
For example, if we wanted a 4 cm margin on the left side of the printed
page, we write:
@page { margin-left: 4cm }
If we wanted a 5 cm margin on the top of the printed page, we write:
@page { margin-top: 5cm }
The margin property is a short-cut for setting margins; it lets us set
all of the margins using one property. For example, we could combine the
following set of properties:
@page { margin-left: 4cm; margin-right: 3cm;
margin-top: 5cm; margin-bottom: 2cm }
[Note: The line above is one line. It was split for formatting
purposes]
into the single property:
@page { margin: 5cm 3cm 2cm 4cm } /* top right bottom left */
Note that the order for the margin properties values is top, right,
bottom, left (you can imagine the order as moving clockwise around the
page, starting from the top).
The margin property does not require you to type in four values. In
fact, you can type in anywhere from one to four values. If you write:
@page { margin: 5cm }
you will set the top, right, bottom, and left margins to 5 centimeters.
If you write:
@page { margin: 5cm 3cm }
you will set the top and bottom margins to 5 centimeters and the right
and left margins to 3 centimeters. If you write:
@page { margin: 5cm 3cm 2cm }
you will set the top margin to 5 centimeters, the right and left margins
to 3 centimeters, and the bottom margin to 2 centimeters.
This may sound rather confusing, but it stems from the fact that most
documents either have all of their margins set to the same size, or the
top and bottom margins set to the same size and the left and right
margins set to another size, or the left and right margins set to the
same size but the top and bottom margins differ. The following table
should help, where we have used the abbreviations 't' for top, 'l' for
left, 'b' for bottom and 'r' for right:
| Number of values in margin property |
Description |
| 1 |
t+l+b+r=same |
| 2 |
t+b=same, l+r=same |
| 3 |
t, l+r=same, b |
While our examples above are all done using centimeters, the margins can
be specified as a percentage, a length, or as the auto value.
Percentage
If you specify a percentage value, the margin is calculated as a
percentage of the width or height of the page (the width of the page is
used for the margin-left and margin-right properties, and the height of
the page is used for the margin-top and margin-bottom properties).
Length
If you specify a length value, the margin is set to an absolute value.
As with the size property, only the in, cm, and mm units may be used.
Font units cannot be used because a piece of paper has no notion of font
metrics.
Auto
If you specify this keyword, you are telling the web browser to use a
computer value for the margins. In most cases, this means that there
will be no margins (other than those specified within the content of the
document).
Currently, none of the major browsers support the margin properties, but
you can get a similar behavior for the left and right margins by
applying the margin-left and margin-right properties to the body
element.
Other Properties
Beginning XHTML
Applying Margins to the Body Element
|
