I am trying to create a PDF file but for some reason the margin is not working, I tried to use the @page but still not able to fix the white gap between two pages.
I hope someone can help me, thanks in advance :)
The code is working perfect in the browser but it doesn't work in the PDF file.
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 9pt;
font-weight: 400;
}
.header {
background-color: #BDEFF2;
}
.header.container {
padding-top: 15pt;
padding-bottom: 15pt;
}
.header img {
max-width: 150pt;
}
.container {
padding: 30pt;
}
.web-address {
float: right;
font-size: 16pt;
}
.course-title {
font-size: 20pt;
}
.course-intro {
padding-right: 15pt;
width: 50%
}
.intro-image {
width: 50%
}
.intro-image img {
width: 100%;
}
td.icon {
width: 60pt;
}
td.icon img {
width: 30pt;
}
hr {
border: 0;
height: 0;
border-top: 2px solid #47BBC5;
}
td.icon-heading {
width: 20%;
}
.icon-label {
font-size: 12pt;
font-weight: bold;
}
.green {
color: #47BBC5
}
.module-number {
font-size: 10pt;
}
.module-name {
font-size: 14pt;
font-weight: bold;
margin-bottom: 20pt;
}
.question {
}
.question-cell {
}
.answer {
font-style: italic;
font-size: 11pt;
border-bottom: solid 1px #000;
padding-bottom: 20pt;
margin-bottom: 30pt;
}
.resources {
padding-bottom: 20pt;
}
.resources-section {
border-bottom: 1px solid #000;
padding-bottom: 20pt;
margin-bottom: 30pt;
}
.bump-up {
padding-top: 0;
}
strong, .bold {
font-family: "Aestetico Semi Bold", Arial, sans-serif;
font-weight: bold;
}
/*the problem is here*/
@page {
margin: 2cm !important;
}
@page :first {
margin: 0cm 2cm 2cm 2cm !important;
}<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ConnectedLE</title>
</head>
<body>
<div class="header container">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle"><img src="http://connectedle.italicsbold.com.au/icons/logo.png"></td>
<td valign="middle">
<div class="web-address">connectedle.com</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--Start of intro section-->
<div class="container">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="40%" class="course-intro">
<strong>Congratulations!</strong> This course has been completed:<br>
<strong>DATE:</strong> 21 December 2021
<br>
<br>
<div class="course-title">
Training for Primary & Secondary Teachers & Support Staff
</div>
</td>
<td align="right" class="intro-image">
<img src="{{asset(" images/intro-image.png")}}">
</td>
</tr>
</tbody>
</table>
<br><br>
<!--Reflection header-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="icon">
<img src="{{asset(" images/icon-reflection.png")}}">
</td>
<td class="icon-heading">
<div class="icon-label green bold">Reflection</div>
</td>
<td>
<hr>
</td>
</tr>
</tbody>
</table>
</div>
<!--End of intro section-->
<!--Module section starts-->
<div class="container bump-up">
<div class="module-number">
MODULE 1
</div>
<div class="module-name">
Substance use
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!--Question starts-->
<tr>
<td class="icon" valign="top">
<img src="{{asset(" images/icon-awareness.png")}}">
</td>
<td class="question-cell">
<div class="icon-label bold">Awareness</div>
<br>
<div class="question">
Lived Experience – Peter and Melissa McGuinness <br>
Founders: You Choose Youth Road Safety<br>
List the two strongest emotions that came up for you watching this video. <br>
What matters to you? Think about yourself behind the wheel - how do you drive? What sort of role
model are you?
</div>
<br>
<div class="icon-label bold">Your response:</div>
<br>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus arcu, egestas eu felis at,
faucibus congue dui. Suspendisse potenti. Donec ac porta dui. Duis interdum et leo ac suscipit. In
nec metus nec eros viverra tempus a nec mi. Donec sollicitudin magna non arcu pellentesque, id
vehicula massa finibus.
</div>
</td>
</tr>
</tbody>
</table>
<!--Question starts-->
<table border="0" cellspacing="0" cellpadding="0" class="page-break">
<tbody>
<tr>
<td class="icon" valign="top">
<img src="{{asset(" images/icon-builds.png")}}">
</td>
<td class="question-cell">
<div class="icon-label bold">Builds</div>
<br>
<div class="question">
What is the main thing you learnt from watching these 2 videos? How do you see your own drinking
habits in relation to the Australian Guidelines?
</div>
<br>
<div class="icon-label bold">Your response:</div>
<br>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus arcu, egestas eu felis at,
faucibus congue dui. Suspendisse potenti.
</div>
</td>
</tr>
</tbody>
</table>
<!--Question starts-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="icon" valign="top">
<img src="{{asset(" images/icon-competency.png")}}">
</td>
<td class="question-cell">
<div class="icon-label bold">Competency</div>
<br>
<div class="question">
What role do you want to play in empowering young people to be the very best versions of themselves?
What have you learnt from this module?
</div>
<br>
<div class="icon-label bold">Your response:</div>
<br>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus arcu, egestas eu felis at,
faucibus congue dui. Suspendisse potenti.
</div>
</td>
</tr>
</tbody>
</table>
<!--Resources starts-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="resources-section">
<tbody>
<tr>
<td class="icon" valign="top">
</td>
<td class="question-cell">
<div class="icon-label bold">Resources</div>
<br>
<div class="resources">
Resources content would go here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus
arcu, egestas eu felis at, faucibus congue dui. Suspendisse potenti. Donec ac porta dui. Duis
interdum et leo ac suscipit. In nec metus nec eros viverra tempus a nec mi. Donec sollicitudin magna
non arcu pellentesque, id vehicula massa finibus.
</div>
</td>
</tr>
</tbody>
</table>
<br>
The 'module sections' would continue down the page
<br>
<br>
</div>
<!--Module section ends-->
</body>
</html>Here is the white gap im talking about it only appears in the PDF file:
