Skip to content

Instantly share code, notes, and snippets.

@vielhuber

vielhuber/index.html

Last active April 8, 2024 08:47
Show Gist options
  • Save vielhuber/98006c7c8c82eb88cca58780a0683330 to your computer and use it in GitHub Desktop.
Save vielhuber/98006c7c8c82eb88cca58780a0683330 to your computer and use it in GitHub Desktop.
Download ZIP
print.css: page breaks and margin #css
Raw
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>.</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="content">
Content on page 1
<div class="page-break"></div>
Content on page 2
<div class="page-break"></div>
Content on page 3
<div class="avoid-break">
This div is never split up.
</div>
</div>
</body>
</html>
Raw
new_gist_file_0
html, body {
padding:0;
margin:0;
}
.page-break {
page-break-before: always;
}
.avoid-break {
page-break-inside: avoid;
}
-->
</style>
</head>
<body>
Raw
print.css
@page {
size: A4 portrait;
margin: 2cm 3cm;
}
html, body {
padding:0;
margin:0;
}
body {
background-color:red;
}
.page-break {
page-break-before: always;
}
.avoid-break {
page-break-inside: avoid;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment