CSS: Hidden elements still take up space on printed output

Question

I'm using css to only print a section of a page:

    body {
 visibility:hidden;
    }
    .print {
     visibility:visible;
     background-color: white;
     margin: 0;
    } 

The section above the element I want to print gets properly hidden in the print output, however it still takes up the area of space. I tested this by making a long vertical list of words. In the print output the same area of white space occurs without the words and then the element output occurs. This problem occurs on chrome and mozilla only. I've also tested the browser's margin options and that's not the problem.

Any ideas?

Answer 1

You want display:none not visibility:hidden. The latter makes the element invisible, but doesn't remove it from the document flow.