HTML and CSS Reference
In-Depth Information
It also does not appear too well, when images run off beyond the page or print
cropped while appearing in full on the website. Hence, we restrict the maximum width
to be as wide as the page itself and no more, as shown in the following code snippet:
img {
max-width: 100% !important;
}
Margins on pages
The @page rule allows you to modify the properties of a page when printing. All
browsers except Firefox support this rule. This rule sets the margins to be 0.5 cm
per page, as shown in the following code snippet:
@page {
margin: 0.5cm;
}
Optimal settings for orphans and widows
Orphans are the lines of text that appear at the bottom of the page. Widows are
those that appear at the top of the page. We make sure that lines do not break in a
manner that leaves fewer lines at the bottom or top than desired. This will create a
more readable experience. The following code snippet is used for that purpose:
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
Keeping headings with content
It is not readable to have the headings appear at the bottom of one page and the
content that the heading is for, appearing on the next. To tell the browsers to avoid
Search WWH ::




Custom Search