<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page margin areas</title>
<style>
@page {
size: 100mm 150mm;
margin: 10mm;
@top-left {
content: 'left';
background: yellow;
}
@top-right {
content: 'right';
background: red;
}
@top-center {
content: 'center (' counter(page) ')';
background: green;
}
@bottom-left {
content: 'left';
background: yellow;
}
@bottom-right {
content: 'right';
background: red;
}
@bottom-center {
content: 'center (' counter(page) ')';
background: green;
}
@left-top {
content: 'top';
background: yellow;
}
@left-bottom {
content: 'bottom';
background: red;
}
@left-middle {
content: 'middle';
background: green;
}
@right-top {
content: 'top';
background: yellow;
}
@right-bottom {
content: 'bottom';
background: red;
}
@right-middle {
content: 'middle';
background: green;
}
@bottom-left-corner {
content: 'bl';
background: #587b80;
}
@bottom-right-corner {
content: 'br';
background: #587b80;
}
@top-left-corner {
content: 'tl';
background: #587b80;
}
@top-right-corner {
content: 'tr';
background: #587b80;
}
}
h2 {
break-inside: avoid;
break-after: avoid;
}
</style>
</head>
<body>
<h1>Page margins</h1>
<p>You should see all 16 page margins, 3 at the top, bottom, left and right plus 4 in each corner.</p>
</body>
</html>
