first page getting empty when use page break inside

Question

I am using page-break-inside: avoid; to avoid the break inside the element. But if the element content has more than one page it is creating new blank space and the element goes to next page in print/converting to pdf.

Can you help me to come out from this? Thanks in advance.

<div class='padding-top' style='page-break-inside: avoid;'>
   <div class='important' style='min-height:20px;'>
       <div class='imp-content'><span class='imp-header'
        style='text-transform:uppercase;float:left;'>Important<sup>
         {{data}} 
        </div>
   </div>
 </div>

Answer 1

This CSS worked for me:

@media print {
  body {
    orphans: 0;
  }
}