Problem in put pdf with fully page without margin

Issue

I would like to create a pdf with dompdf library with fully page. I am using framework laravel and my HTML code is in the blade. At first, I tried to put

body{
  margin: 0px;
}

However the code is not working. This way, I put the negative value in the margin and works, but have a break in the final of page, you can see the image:
first problem

Another problem that I have is the beginning of second, third, fourth, etc, page. The begin of page has a blank part, you can see in the image:
page blank

Here is my blade code:

CSS:

<style>

        body *{
            font-family: 'Roboto', sans-serif;
            margin: -45px;
        }
        

        #titulo{
            color: #FFFFFF;
            background-color: #5481eb;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            border:1px solid rgb(114, 110, 110);
            padding: 12px;
        }

        .tabela-up-left{
            color: #FFFFFF;
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            background-color: #707070;
            border:1px solid #000;
            padding: 6px;
            height: 20px;
        }

        .tabela-up-right{
            color: #FFFFFF;
            font-weight: bold;
            background-color: #c4c0c0;
            text-align: left;
            font-size: 14px;
            border:1px solid #000;
            width:100%;
            padding: 6px;
            height: 20px;
        }

        .tabela-down{
            color: #FFFFFF;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
            background-color: #707070;
            border: 1px solid #000;
            width: 45%;
            padding: 6px;
            height: 20px;
        }

        .tabela-description{
            font-size: 14px;
            text-align: center;
            border: 1px solid #000;
            width: 45%;
            padding: 6px;
            height: 20px;
        }
    </style>

HTML:

     <div id = "titulo">
        LISTAGEM DE PENDÊNCIAS
      </div>
      
      <table style="border-collapse: collapse;width:100%;">
  
      <tr>
          <td class = "tabela-up-left">PROTOCOLO:</td>
          <td class = "tabela-up-right" colspan="2">123</td>
      </tr>
      <tr>
          <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
          <td class = "tabela-up-right" colspan="2">7773</td>
      </tr>
 

  <tr>
      <td class = "tabela-down">VÍNCULO</td>
      <td class = "tabela-down">PÊNDENCIA</td>
      <td class = "tabela-down">STATUS</td>
  </tr>
 
  <tr>
      <td class = "tabela-description">Dados gerais</td>
      <td class = "tabela-description">Instrumento de Titulação</td>
      <td class = "tabela-description">Nenhum</td>
  </tr>
  <tr>
    <td class = "tabela-description">Dados gerais</td>
    <td class = "tabela-description">Instrumento de Titulação</td>
    <td class = "tabela-description">Nenhum</td>
</tr>
<tr>
  <td class = "tabela-description">Dados gerais</td>
  <td class = "tabela-description">Instrumento de Titulação</td>
  <td class = "tabela-description">Nenhum</td>
</tr>
<tr>
  <td class = "tabela-up-left">PROTOCOLO:</td>
  <td class = "tabela-up-right" colspan="2">123</td>
</tr>
<tr>
  <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
  <td class = "tabela-up-right" colspan="2">7773</td>
</tr>


<tr>
<td class = "tabela-down">VÍNCULO</td>
<td class = "tabela-down">PÊNDENCIA</td>
<td class = "tabela-down">STATUS</td>
</tr>
<tr>
  <td class = "tabela-description">Dados gerais</td>
  <td class = "tabela-description">Instrumento de Titulação</td>
  <td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>
</tr>
<tr>
<td class = "tabela-description">Dados gerais</td>
<td class = "tabela-description">Instrumento de Titulação</td>
<td class = "tabela-description">Nenhum</td>

</tr>
<tr>
    <td class = "tabela-down">VÍNCULO</td>
    <td class = "tabela-down">PÊNDENCIA</td>
    <td class = "tabela-down">STATUS</td>
    </tr>
    <tr>
      <td class = "tabela-description">Dados gerais</td>
      <td class = "tabela-description">Instrumento de Titulação</td>
      <td class = "tabela-description">Nenhum</td>
    </tr>
    <tr>
    <td class = "tabela-description">Dados gerais</td>
    <td class = "tabela-description">Instrumento de Titulação</td>
    <td class = "tabela-description">Nenhum</td>
    </tr>
    <tr>
    <td class = "tabela-description">Dados gerais</td>
    <td class = "tabela-description">Instrumento de Titulação</td>
    <td class = "tabela-description">Nenhum</td>
    
    </tr>
    <tr>
        <td class = "tabela-down">VÍNCULO</td>
        <td class = "tabela-down">PÊNDENCIA</td>
        <td class = "tabela-down">STATUS</td>
        </tr>
        <tr>
          <td class = "tabela-description">Dados gerais</td>
          <td class = "tabela-description">Instrumento de Titulação</td>
          <td class = "tabela-description">Nenhum</td>
        </tr>
        <tr>
        <td class = "tabela-description">Dados gerais</td>
        <td class = "tabela-description">Instrumento de Titulação</td>
        <td class = "tabela-description">Nenhum</td>
        </tr>
        <tr>
        <td class = "tabela-description">Dados gerais</td>
        <td class = "tabela-description">Instrumento de Titulação</td>
        <td class = "tabela-description">Nenhum</td>
        
        </tr>
        <tr>
            <td class = "tabela-up-left">PROTOCOLO:</td>
            <td class = "tabela-up-right" colspan="2">123</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
            <td class = "tabela-up-right" colspan="2">7773</td>
          </tr>
          
          
          <tr>
          <td class = "tabela-down">VÍNCULO</td>
          <td class = "tabela-down">PÊNDENCIA</td>
          <td class = "tabela-down">STATUS</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">PROTOCOLO:</td>
            <td class = "tabela-up-right" colspan="2">123</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
            <td class = "tabela-up-right" colspan="2">7773</td>
          </tr>
          
          
          <tr>
          <td class = "tabela-down">VÍNCULO</td>
          <td class = "tabela-down">PÊNDENCIA</td>
          <td class = "tabela-down">STATUS</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">PROTOCOLO:</td>
            <td class = "tabela-up-right" colspan="2">123</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
            <td class = "tabela-up-right" colspan="2">7773</td>
          </tr>
          
          
          <tr>
          <td class = "tabela-down">VÍNCULO</td>
          <td class = "tabela-down">PÊNDENCIA</td>
          <td class = "tabela-down">STATUS</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">PROTOCOLO:</td>
            <td class = "tabela-up-right" colspan="2">123</td>
          </tr>
          <tr>
            <td class = "tabela-up-left">CÓDIGO DO LOTE:</td>
            <td class = "tabela-up-right" colspan="2">7773</td>
          </tr>
          
          
          <tr>
          <td class = "tabela-down">VÍNCULO</td>
          <td class = "tabela-down">PÊNDENCIA</td>
          <td class = "tabela-down">STATUS</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
          <tr>
            <td class = "tabela-description">Dados gerais</td>
            <td class = "tabela-description">Instrumento de Titulação</td>
            <td class = "tabela-description">Nenhum</td>
          </tr>
        
</table>

Someone can help me?

Solution

Inside your pdf blade file, you can use CSS.

<style>
    @page  {
        /*margin: 2cm 2cm 1.5cm 1.5cm; You can specify the margin of the page*/
        /*size: 21cm 29.7cm; You can specify the print size as well*/
        margin: 0;
    }
         
    
    body { margin: 0px; }
</style>

You might also need to set:

html { margin: 0px}

Answered By – Dream Bold

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published