I have set a header to static and I would like to set a bottom margin on that static header, so content begins a certain number of pixels from the top. However, adding "margin-bottom" static element has no effect, and adding "margin-bottom" to @top break the content and layout of the static header element. Can anyone help me with this?

I have attached the PDF. Look at the last two pages, the margin above the header on the first two pages com from something else.

The CSS:

@page {
margin-left: 0;
margin-right: 0;

@top {
margin: 0;
padding-top: 10px;
/*margin-bottom: 28px;*/
content: flow(header);
}
}


.header {
flow: static(header);
padding-top: 18px;
padding-bottom: 18px;
padding-left: 48px;
overflow: hidden;
margin-bottom: 28px;
}

1. test_pdf_name_second_breakfast_no_page_numbers.pdf‎ 52.4 kB

The margin-top of the @page itself will be determine the space available for the @top margin box.

Thanks for the reply. I am no sure I understand how it solves my problem though.. So, how can I make the rows of the tables on the last two pages begin "x" number of pixels down from the header? Thereby moving them further down on the pages..? I think I explained it wrong in my first post, but that is what I am trying to achieve.

Ah sorry I see the problem. How about adding some padding-top to the @page, and reducing the margin-top on other elements like the headings?

Thanks man !! Solved the problem. I'll buy you a beer if you ever get to Copenhagen

Another thing, is it possible to remove the small white space above the header ? And, is it possible to check if an element is split between two pages and then move it to the next if that is the case ?

Edited 22 Mar 2018 by stoffer_schenk

I think if you remove the padding-top: 10px from @top and add 10px padding-top to the .header element that should help, and you can apply "page-break-inside: avoid" to an element that you don't want to split.