Printing using JS and @media print CSS but content pushed down-CodePudding

My content in the print preview window is displaying down about 5 or 6 lines.

Since I've already dealt with height, margin & padding, I'm unsure what's keeping it down. I can't check with inspect because it's inside a print preview window. I'm just experimenting with a few things so no rush. I will post an answer if I figure it out.

JS - called from onclick();

function print1() {
    window.print();
}

CSS

    @media print{
    body *:not(#OFP_here){
        visibility: hidden;
        height:0px;
        margin: 0px; 
        padding: 0px;            
    }

Update: 3 lines are due to a table that gets built by JS, even though I have accounted for the table in @media.

CodePudding user response：

You need to target the @page which will be what modifies the global page settings. You can read more about it here at MDN

@page

The @page CSS at-rule is used to modify some CSS properties when printing a document.

Syntax
@page {
  margin: 1cm;
}

CodePudding user response：

visibility: hidden; will "hide" those elements in the sense that their contents are hidden. But the space they occupy without that rule will still appear as empty space, which I suppose is what you are referring to.

Use display: none instead, which will actually hide the affected elements and not leave any empty space.