at-page-rule-002-c

Page Margins: bottom and left (percent)

WeasyPrint

This browser

Flags
paged
Assertion
A margin declaration within the @page context applies to the page box. Percentage values on right and left margins are relative to the page box width. Percentage values on top and bottom margins are relative to the page box height.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: Page Margins: bottom and left (percent)</title>
 5   <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
 6   <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins">
 7   <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties">
 8   <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule">
 9   <meta name="flags" content="paged">
10   <meta name="assert" content="A margin declaration within the @page context applies to the page box.">
11   <meta name="assert" content="Percentage values on right and left margins are relative to the page box width.">
12   <meta name="assert" content="Percentage values on top and bottom margins are relative to the page box height.">
13   <style type="text/css">
14    @page  {
15 		margin-bottom: 50%;
16 		margin-left: 50%;
17 	}
18 	html, body {background: #ccc;}
19   </style>
20  </head>
21  <body>
22   <div>When printed, this paragraph appears inside a grey box in the upper-right quadrant of the page. The bottom edge of the box should be exactly 1/2 way down the page, and the left edge of the box should be exactly half way across the page (You can test this by folding the page in half).
23   </div>
24  </body>
25 </html>