Estou gerando um loop de uma div de tamanho fixo e gostaria que na hora da impressão cada uma fique em uma página.
Porém a primeira Div do Loop fica com uma margem-top
impedindo que isso aconteça !
Existe alguma maneira que faça essa primeira div ser dirente das demais nessa questão da margin
?
Segue Código para melhor entendimento
Grato :)
<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>