I am generating a loop of a fixed-size div and would like each one to be on a page at the time of printing.
But the first Div of the Loop gets a margem-top
preventing this from happening!
Is there any way to make this first div be the first of the others in this margin
question?
Follow Code for better understanding
Thank you :)
<style type="text/css">
.papel {width: 297mm;height: 208mm; background-color:red;border: 3px solid gray;top: -45%;left: 0%;position: absolute; overflow:hidden;transform:scale(0.5) translate3d(0px,0px,0px); margin-bottom: 80px;float:left;}
@media print {
.papel {transform:scale(1); margin-top:0!important; border:none;top:0px!important;left: 0px!important;transform:translate3d(0px,0px,0px)!important;}
#imprimir{display:none!important;}
}
</style>
<?php for($i=0;$i<=4;$i++):
if($i == 1) $cor = "blue";
if($i == 2) $cor = "black";
if($i == 3) $cor = "yellow";
if($i == 4) $cor = "green";
?>
<div class="papel" id="papel" style="margin-top:calc(210mm * <?php echo $i?>)!important;background-color:<?php echo $cor ?>">
</div>
<?php endfor;?>
<input type="button" id="imprimir" onclick="imprimir()" value="Imprimir">
<script type="text/javascript">
function imprimir(){
window.print();
}
</script>